javascript - 如何使JavaScript识别退格键？

我目前有正在运行的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>

该函数将看到在age字段中键入了什么值，然后根据其值禁用1个或两个字段。当前，如果您输入“ 50”，则启用该字段。大。但是，如果您随后删除零，则我有“ 5”，则该字段仍将保持启用状态。
我希望它具有超级响应能力，以便它可以实时响应用户输入的任何更改。这可能吗？

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>

最佳答案

例如，当您单击退格键时，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>