3

Есть input type="text" и button. Нужно сделать проверку: если в input type="text" введено более одного символа, то кнопка активна, если менее одного, то - неактивна.

<input type="text" id="text1">
<button id="btn"></button>
2
  • @NickVolynkin, лучшее решение, как можно модератора вызвать для подобных случаев? Только тревогу ставить?
    – user207618
    5 сен 2016 в 11:06
  • @Other в чатик ответил - видно?
    – Nick Volynkin
    5 сен 2016 в 11:11

2 ответа 2

13

function ctrlButton() {
  btn.disabled = this.value.trim().length === 0;
}

text1.addEventListener('input', ctrlButton, false);
ctrlButton.call(text1);
<input type="text" id="text1">
<button id="btn">Button</button>

Кстати, можно и без JS обойтись

#text1:invalid + #btn {
  pointer-events: none;
  /* для IE < 11 -- display: none; */
}
<input type="text" id="text1" pattern=".{1,}" required>
<button id="btn">Button</button>

2
  • К сожалению, данный код не подходит для моего случая. Можно ли сделать так, чтобы в if было прописано "в поле ввода один или более символов"?
    – A.Hall
    1 сен 2016 в 17:03
  • @A.Hall, там это и написано.
    – user207618
    5 сен 2016 в 11:00
5

Например так:

$('#text1').on('keyup',function(){
  var $this = $(this),
      val = $this.val();
  
  if(val.length >= 1){
    $('#btn').show(100);
  }else {
    $('#btn').hide(100);
  }
});
#btn {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Попробуйте ввести в input что-нибудь. <br/>
<input type="text" id="text1">
  <button id="btn">button</button>

2
  • 2
    @Other в этом нет ничего плохого. Библиотеки были сделаны для упрощения работы - поэтому ничего страшного нет. И этот ответ вполне отвечает на поставленный вопрос.
    – alexoander
    5 сен 2016 в 11:27
  • @alexoander, плохого нет, хотя жикверисты, адепты поклонения jQuery, достали, но в метках нет тэгов библиотек, значит нужна ванилька.
    – user207618
    5 сен 2016 в 11:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.