Javascript禁用输入字段答案

【问题标题】：Javascript disable input fieldJavascript禁用输入字段
【发布时间】：2016-03-20 14:10:39
【问题描述】：

我有两个输入字段，一个用于电话号码，另一个用于电子邮件。我想根据用户选择禁用一个字段。如果用户在任一字段中单击并输入输入，则会禁用另一个字段，反之亦然。

我已经编写了代码，但似乎只有在电话字段中输入数字时才会禁用电子邮件字段。删除电话字段中的数字将从电子邮件输入字段中删除禁用。

在我的 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">

在 JAVASCRIPT 中

 $('#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 可以正常工作。

关于我可能缺少什么的任何想法或见解？

【问题讨论】：

方法错误，你应该使用prop，而不是attr！
另外，一封邮件可能不是“超过1”，好像你想检查修剪后的值是否等于""（空字符串）
最后，live() 在几年前被弃用并删除了
您还混合使用了 javascript 和 jquery。我看不出有什么理由编写代码使您尝试这样做变得复杂。

标签： javascript jquery html

【解决方案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 );

});

【讨论】：

很好，但是我可以只用鼠标来删除整个值...您应该包含change 事件。

【解决方案2】：

您可以使用 jQuery on 代替 live。从 jQuery 1.7 开始不推荐使用 live。您还可以在输入元素上查找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);
      }
  });      

});

Here 是一个工作示例。

【讨论】：

很好，但是我可以只用鼠标来删除整个值...您应该包含change 事件。

【解决方案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">

【讨论】：