How to make JavaScript recognize backspace?

Question

I currently have javascript that is working and doing what I want but with one key thing missing. basically when the user fills in the form 2 fields are disabled.

<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>

the function sees what value is typed into the age field and then depending on what it is will disable 1 or both fields. currently if you type in say '50' the fields are enabled. great. but if you then delete the zero so i have '5' the fields will still remain enabled. i want it to be ultra responsive so that it can respond in real time to any alterations to user input. is this possible?

 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; } } 

 <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" onkeyup="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 1

Use the oninput event instead. Also you should re-disable when the age is not greater than 16, or 21. See this updated JSFiddle: https://jsfiddle.net/bpjmzxny/ .

Answer 2

The onkeyup doesn't work when you click backspace for example. That causes your code not to work on the change of the input. You can use the oninput event instead. It will fire even when you click backspace or do a copy/paste.

 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>