Javascript 仅在输入字段中允许退格和数字

Question

我有以下 function 当用户提供输入时，它只允许数字并排除其他所有内容。 但是，这个 function 也阻止了退格，我无法删除输入的数字。

 $(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);" />

在这里在线if (key != 9 && (key < 48 || key > 57))我尝试使用key != 9 OR key != 8作为退格键的键码是 8 但它不起作用。 我怎样才能在这里允许退格？

Answer 1

您可以通过添加更多来实现。 下面我为例外添加了小键盘键。 我创建了另一个 function 只是为了检查密钥。 首先，我们在阻止默认操作之前检查一些异常。

 $(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">