Javascript отключить поле ввода

Question

У меня есть два поля ввода, одно для номера телефона, другое для электронной почты. Я хотел бы отключить одно поле на основе выбора пользователя. Если пользователь щелкнет и введет ввод в одном из полей, он отключит другое и наоборот.

Я написал код, но он, кажется, отключает поле электронной почты только после ввода цифр в поле телефона. Удаление номеров в поле телефона удаляет отключенных из поля ввода электронной почты.

В МОЕМ HTML

 <input type="number" name="number" placeholder="hone" class="cellphone" data-cp-visibility="new-user" id="phone">

 <input type="email" name="email" placeholder="enter email" class="email" data-cp-visibility="new-user" id="email">

В ЯВАСЦРИПТЕ

 $('#phone').live('blur',function(){ 
     if(document.getElementById('phone').value > 1) {
        $('#email').attr('disabled', true);
      } else {
       $('#email').attr('disabled', false);
  }
 });

$('#email').live('blur',function(){ 
   if(document.getElementById('email').value > 1) {
    $('#phone').attr('disabled', true);
     } else {
       $('#phone').attr('disabled', false);
   }
});

В конечном итоге я пытаюсь добиться того, чтобы пользователь мог щелкнуть в любом поле, а затем ввести ввод, после чего другое поле отключено. Если они решат удалить введенный текст, это приведет к удалению отключенной функции, а затем они смогут выбрать противоположное поле ввода.

Я не уверен, почему он работает только для одного поля, а не для другого, или почему, если вы введете в поле телефона 333-333-3333, он отключит отключенный, но 33333333 работает нормально.

Любые идеи или понимание того, что я могу упустить?

javascript jquery html

0

VanCoon 15 Дек 2015 в 01:58

Answer 1

Чтобы исправить проблему с приборной панелью, которую вы испытываете, вы можете изменить ее на:

<input type="text" required="" pattern="\d{3}[\-]\d{3}[\-]\d{4}" name="phone" id="phone"  data-cp-visibility="new-user" placeholder="123-345-5678">

И вот еще одна версия JS:

var $phone = $('#phone'),
    $email = $('#email');

$phone.on('keyup change', function() {

   $email.prop('disabled', $(this).val() ? true : false );

});

$email.on('keyup change', function() {

    $phone.prop('disabled', $(this).val() ? true : false );

});

0

Amr Morsy 14 Дек 2015 в 23:50

Answer 2

Вы можете использовать jQuery on вместо live. Начиная с jQuery 1.7, лайв устарел. Вы также можете найти событие keyup / keydown в элементе ввода.

$(function(){

   $('#phone').on('keyup',function(){ 

      if($(this).val()!=="") 
      {
        $('#email').prop('disabled', true);
      }
      else {
        $('#email').attr('disabled', false);
      }
   });

   $('#email').on('keyup',function(){ 

      if($(this).val()!=="") 
      { 
         $('#phone').prop('disabled', true);
      }
      else {
          $('#phone').prop('disabled', false);
      }
  });      

});

Здесь - рабочий пример.

0

Shyju 14 Дек 2015 в 23:19

Answer 3

Я бы порекомендовал использовать .on('input', ...) для прослушивания изменений, так что даже если вы используете кнопки увеличения / уменьшения (или другие формы ввода), вы будете запускать обработчик событий. Затем используйте .attr('disabled', boolean) для управления состоянием включения / выключения, см. Пример ниже:

$(function() {
  $('#phone').on('input', function() {
    $('#email').attr('disabled', $(this).val() !== "");
  });
  $('#email').on('input', function() {
    $('#phone').attr('disabled', $(this).val() !== "");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" placeholder="phone" id="phone">
<input type="email" placeholder="enter email" id="email">

0

deadbeef 14 Дек 2015 в 23:32

Javascript отключить поле ввода

3 ответа

Похожие вопросы

Новые вопросы

javascript