Javascript禁用输入字段
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可以正常工作。
关于我可能缺少什么,有什么想法或见解吗?
要修复手机输入中的dash问题,可以尝试将其更改为:
<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 );
});
您可以使用jQuery on
而不是live
。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);
}
});
});
这是一个工作样品。
我建议使用.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">
相关文章:
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 而循环只设置php中输入字段中的第一个值
- 使用 Javascript 将字段输入除以 12
- 合并来自多个字段输入的搜索结果
- 使用 Javascript 实时打印字段输入数据
- 防止AngularJS中跨路由的字段输入重复
- 引用Iframe中的字段输入
- 禁用html5”;“必需”;不显示窗体部分时的字段输入属性
- JavaScriptFormValidation-需要特定的字段输入,但使用大写/小写
- 验证VF页面上所需字段输入的Javascript不起作用
- 在没有
- 使用Jquery将字段输入值作为查询字符串附加到url
- HTML5 jQuery选择所有日期字段'输入:date'
- 将字段输入复制到另一个字段输入
- 向图像添加字段(输入)
- 动态添加字段输入不会存储值并传递给控制器
- 向输入字段输入键击
- 我如何通过javascript验证datetime字段输入
- HTML如何将用户字段输入作为json对象发送
- 如何根据'select' onchange事件将值填充到第二个输入字段?输入