将 JQuery 转换为 addEventListener 用于按键事件

Question

我需要创建一个只接受数字的输入。为此，我创建了一个文本类型的输入，并且只接受 5 位长度。

<input id="inputNumber" type="text" maxlength="5">

为了只接受数字，我创建了如下的 jquery 代码。

$("#inputNumber").keypress(function (value) {
// If the letter is not digit then display error and don't type anything
if (value.which != 8 && value.which != 0 && (value.which < 48 || value.which > 57)) {
return false;
}
else {
return true;
}
});

我尝试将其转换为我的 Type 脚本文件的 AddEventListner 但失败了。我什至尝试了下面的方法，但又失败了。我该如何解决这个问题。

参考：keypress event doesn't log input value first time event is fired

Answer 1

请尝试下面的keydown事件并根据keycode阻止字符？

window.addEventListener('DOMContentLoaded', (event) => {
	    var inputNumber = document.getElementById('inputNumber');
		inputNumber.addEventListener('keydown', function(event) {
                        if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode ==  13 || event.keyCode == 190 || event.keyCode == 110 || (event.keyCode == 65 && event.ctrlKey === true) || (event.keyCode >= 35 && event.keyCode <= 39) || event.keyCode == 189) {
                            return
                        } else {
                            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                                event.preventDefault()
                            }
                        }
    })
});

<input id="inputNumber" type="text" maxlength="5"/>

Answer 2

如果您正在寻找可能看起来像这样的 js 等效代码：

const inputNumber = document.querySelector("#inputNumber");

inputNumber.addEventListener("keypress", (event) => {

  if (isNaN(event.key)) {
    event.preventDefault();
    return false;
  } else {
    return true;
  }
});

<input id="inputNumber" type="text" maxlength="5">

我需要创建一个只接受数字的输入。

您可以改用input type="number" 或将验证简化为!isNaN(event.key)

const inputNumber = document.querySelector("#inputNumber") as HTMLInputElement;

inputNumber.addEventListener("keydown", (event: KeyboardEvent) => {

  if (isNaN(Number(event.key))) {
    event.preventDefault();
    return false;
  } else {
    return true;
  }
});