javascript - 将 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"/>