[英]Javascript disable input field
我有两个输入字段,一个用于电话号码,另一个用于电子邮件。 我想根据用户选择禁用一个字段。 如果用户单击并在任一字段中输入输入,则将禁用其他字段,反之亦然。
我已经编写了代码,但似乎仅在在电话字段中输入数字后才禁用电子邮件字段。 删除电话字段中的数字会从电子邮件输入字段中删除禁用的人。
在我的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可以正常工作。
关于我可能缺少的任何想法或见解?
您可以使用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);
}
});
});
这是一个工作示例。
我建议使用.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">
要解决电话输入中出现的破折号问题,您可以尝试将其更改为:
<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 );
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.