如何讓JavaScript識別退格？

Question

我目前有工作和做我想要的但有一個關鍵的東西缺少的JavaScript。 基本上當用戶填寫表單2字段被禁用時。

<label>Can you drive? </label> <input type="booleam" id="drive" disabled><br> 
<label>What is your occupation? </label> <input type="text" id="occupation" disabled><br> 

功能看到的值鍵入到年齡字段，然後根據它是將禁用1個或兩個字段的內容。目前，如果您輸入「50」，則這些字段已啓用。大。但如果你刪除零，所以我有'5'字段將仍然保持啓用狀態。 我希望它具有超高的響應能力，以便它可以實時響應任何對用戶輸入的更改。這可能嗎？

function ifOfAge(){ 
 

 
\t var age = document.getElementById("age"); 
 
\t var drive = document.getElementById("drive"); 
 
\t var occupation = document.getElementById("occupation"); 
 
\t 
 
\t if (age.value >=21){ 
 
\t \t drive.disabled = false; 
 
\t \t occupation.disabled = false; 
 
\t }else if (age.value >=16){ 
 
\t \t drive.disabled = false; 
 
    } 
 
\t \t 
 
\t 
 
\t 
 
}

<form id="myform"> 
 
\t \t 
 
\t \t <label>Username </label> <input type="text" name="uname" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip"><br> 
 
\t \t 
 
\t \t <div class="pwordCheck"> 
 
\t \t \t <label>Password </label> <input type="password" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br> 
 
\t \t \t <label>Confirm Password </label> <input type="password" id="confpword" onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip"> 
 
\t \t \t <span id="themessage" class="themessage"></span><br> 
 
\t \t </div> 
 
\t \t 
 
\t \t <label>Email </label> <input type="email" id="e-mail"><br> 
 
\t \t 
 
\t \t <label>Age </label> <input type="number" id="age" onkeyup="ifOfAge(); return false;"><br> 
 
\t \t 
 
\t \t <label>Can you drive? </label> <input type="booleam" id="drive" disabled><br> 
 
\t \t 
 
\t \t <label>What is your occupation? </label> <input type="text" id="occupation" disabled><br> 
 
\t \t 
 
\t <input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"> 
 
\t </form>

Answer 1

的onkeyup當你點擊退格鍵，例如不工作。這會導致您的代碼不能處理輸入的更改。您可以改用oninput事件。即使您單擊退格鍵或執行復制/粘貼，它也會啓動。

function ifOfAge() { 
 

 
    var age = document.getElementById("age"); 
 
    var drive = document.getElementById("drive"); 
 
    var occupation = document.getElementById("occupation"); 
 

 
    if (age.value >= 21) { 
 
    drive.disabled = false; 
 
    occupation.disabled = false; 
 
    } else if (age.value >= 16) { 
 
    drive.disabled = false; 
 
    } else { 
 
    drive.disabled = true; 
 
    occupation.disabled = true; 
 
    } 
 

 

 
}

<form id="myform"> 
 

 
    <label>Username</label> 
 
    <input type="text" name="uname" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip"> 
 
    <br> 
 

 
    <div class="pwordCheck"> 
 
    <label>Password</label> 
 
    <input type="password" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"> 
 
    <br> 
 
    <label>Confirm Password</label> 
 
    <input type="password" id="confpword" onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip"> 
 
    <span id="themessage" class="themessage"></span> 
 
    <br> 
 
    </div> 
 

 
    <label>Email</label> 
 
    <input type="email" id="e-mail"> 
 
    <br> 
 

 
    <label>Age</label> 
 
    <input type="number" id="age" oninput="ifOfAge(); return false;"> 
 
    <br> 
 

 
    <label>Can you drive?</label> 
 
    <input type="booleam" id="drive" disabled> 
 
    <br> 
 

 
    <label>What is your occupation?</label> 
 
    <input type="text" id="occupation" disabled> 
 
    <br> 
 

 
    <input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"> 
 
</form>

Answer 2

使用oninput事件來代替。 你也應該重新禁用時年齡不大於16，或21看到這個更新的jsfiddle：https://jsfiddle.net/bpjmzxny/。