Categories
JavaScript Answers

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 can listen to the wheel event.

For instance, we write

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

to get the active element with document.activeElement.

We get its type attribute and check if it’s 'number'.

And if it is, we call its blur method to move focus away from it to stop it from scrolling.

Conclusion

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

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

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