javascript - 将JQuery转换为用于keypress事件的addEventListener

我需要添加仅接受数字的输入。为此，我创建了一个类型为text的输入，并且只接受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

最佳答案

如果您要寻找的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;
  }
});

关于javascript - 将JQuery转换为用于keypress事件的addEventListener，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61951385/