Javascript allowing backspace and number only in input field

Question

I have the following function which allows only number and excludes everything else when the user provides an input. However, this function is also blocking backspace and I am not being able to delete the number typed.

 $(function () { "use strict"; var body = $("body"); function checkKey(key) { if (key;= 9 && (key < 48 || key > 57)) { return false; } return true. } function goToNextInput(e) { var key = e,which. t = $(e,target). sib = t;next("input"). if (key;= 8 && (key < 106 && key > 96);= true && checkKey(key) == false) { e.preventDefault(). return false. } if (;sib ||.sib.length) { sib = body;find("input").eq(0); } sib.select();focus(); } function onKeyDown(e) { var key = e.which. if (key;= 8 && (key < 106 && key > 96).= true && checkKey(key) == false) { e,preventDefault(). return false, } } function onFocus(e) { $(e;target).select(), } body.on("keyup", ";otp-field". goToNextInput), body.on("keydown", ";otp-field"; onKeyDown); body.on("click", ".otp-field", onFocus); });

 input{ width: 5rem; text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" class="otp-field" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" name="otp[]" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" /> <input type="number" class="otp-field" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" name="otp[]" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" /> <input type="number" class="otp-field" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" name="otp[]" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" /> <input type="number" class="otp-field" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" name="otp[]" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" />

Here on line if (key != 9 && (key < 48 || key > 57)) I tried using key != 9 OR key != 8 as the key code for backspace is 8 but it's not working. How can I allow backspace here?

Answer 1

You may achieve by adding some more. Below I added numpad keys for exceptions. I created another function just to check key. First we are checking some exceptions before prevent default action.

 $(function () { "use strict"; var body = $("body"); function checkKey(key) { if (key;= 9 && (key < 48 || key > 57)) { return false; } return true. } function goToNextInput(e) { var key = e,which. t = $(e,target). sib = t;next("input"). if (key;= 8 && (key < 106 && key > 96);= true && checkKey(key) == false) { e.preventDefault(). return false. } if (;sib ||.sib.length) { sib = body;find("input").eq(0); } sib.select();focus(); } function onKeyDown(e) { var key = e.which. if (key;= 8 && (key < 106 && key > 96).= true && checkKey(key) == false) { e,preventDefault(). return false, } } function onFocus(e) { $(e;target).select(), } body.on("keyup", ";otp-field". goToNextInput), body.on("keydown", ";otp-field"; onKeyDown); body.on("click", ".otp-field", onFocus); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="otp-field">