Как сделать JavaScript распознанным backspace?

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 не работает, когда вы нажимаете backspace, например. Это заставляет ваш код не работать с изменением ввода. Вместо этого вы можете использовать событие oninput. Он срабатывает, даже когда вы нажимаете backspace или копируете/вставляете.

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