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.
