How to disable scrolling on number inputs with JavaScript?

Spread the love

Sometimes, we want to disable scrolling on number inputs with JavaScript.

In this article, we’ll look at how to disable scrolling on number inputs with JavaScript.

How to disable scrolling on number inputs with JavaScript?

To disable scrolling on number inputs with JavaScript, we listen to the wheel event.

For instance, we write

document.addEventListener("wheel", (event) => {
  if (document.activeElement.type === "number") {
    document.activeElement.blur();
  }
});

to add the wheel event listener.

In the event listener, we check if the type attribute of the active input is 'number'.

If it is, we call blur to move focus away from it.

Conclusion

To disable scrolling on number inputs with JavaScript, we listen to the wheel event.

Leave a Reply

Your email address will not be published. Required fields are marked *