Javascript禁用输入字段

问题描述：

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

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

IN MY 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'！ – adeneo

此外，电子邮件可能不是*“超过1”*，似乎你想检查修剪后的值是否等于'“”'（空字符串） – adeneo

最后，'live（）'在几年前被弃用和删除 – adeneo

答

解决您正在使用手机输入具有破折号的问题，你可以尝试将其更改为：

<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'事件。 –

@ErikPhilips啊差点忘了，好点，片段更新了。 –

答

您可以使用jQuery on而不是live。 live从jQuery 1.7开始已被弃用。您还可以查找输入元素上的keyup/事件。

$(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'事件。 –

答

我建议使用.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">

Javascript禁用输入字段

相关推荐