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

Question

I needed to craete an input which only accepts number. For that, I have created an input with type text and only accepts 5 digits of length.

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

For accepting only number, I created jquery code like the following.

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

I tried to convert it into AddEventListner for my Type script file but failed. I even tried below method but failed again. How can I resolve this.

Referece: keypress event doesn't log input value first time event is fired

Answer 1

Please try below keydown event and prevent the characters based on the 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

If you are looking for js equivalent code that might look like:

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

I needed to craete an input which only accepts number.

You can use input type="number" instead or simplify validation to .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;
  }
});