Sometimes, we want to not allow typing alphabetic characters in a number input with JavaScript.

In this article, we’ll look at how to not allow typing alphabetic characters in a number input with JavaScript.

How to not allow typing alphabetic characters in a number input with JavaScript?

To not allow typing alphabetic characters in a number input with JavaScript, we can listen for the keypress event and check which key is pressed when the event is triggered.

For instance, we write:

<input>

to add an input.

Then we write:

const input = document.querySelector('input')
input.onkeypress = (evt) => {
  const charCode = evt.keyCode;
  if (charCode != 46 && charCode > 31 &&
    (charCode < 48 || charCode > 57)) {
    evt.preventDefault()
  }
}

to select an input with querySelector.

Then we add a keypress event handler on the input by setting the input.onkeypress property to a function that checks which key is pressed.

If a number key or a period isn’t pressed, then we call evt.preventDefault to stop the character for the key from being appended to the input value.

Conclusion

To not allow typing alphabetic characters in a number input with JavaScript, we can listen for the keypress event and check which key is pressed when the event is triggered.