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工作正常。

任何想法或見解我可能會失蹤？

來源

2015-12-14 VanCoon

錯誤的方法，你應該使用'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); 

});

來源

2015-12-14 23:39:48

不錯，但我可以只用鼠標剪出整個值......你應該包含'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是一個工作示例。

來源

2015-12-14 23:19:05 Shyju

不錯，但是我可以只用鼠標剪出整個值......你應該包含'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">

來源

2015-12-14 23:32:58 deadbeef

Javascript禁用輸入字段

回答

相關問題