Categories
JavaScript Answers

How to Disable Scrolling on Number Input with JavaScript?

Spread the love

We can listen to the wheel event and remove focus on the input when we start scrolling on the mouse wheel.

For instance, if we have the following HTML:

<input type='number'>

Then we can listen to the wheel event by writing:

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

We check if the type attribute of the element we focused on is set to number with:

document.activeElement.type === "number"

If it is, then we call document.activeElement.blur() to remove focus from it.

Now when we try to scroll with the scroll wheel, the browser will move focus away from the input.

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 *