[英]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.