javascript - 如何让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”，这些字段仍将保持启用状态。 我希望它具有 super 响应能力，以便它可以实时响应用户输入的任何更改。这可能吗？

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

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