Disable scroll on number input

Scrolling on an active number input changes the values by default. This can cause errors when the user intends to scroll the page instead. This bit of JS uses only one event listener and will change the default behaviour for any number input with the "noscroll" class.

by rakmanyi_peter

HTML

<form>
  <p class="instructions">Try to select and then scroll on the two number inputs to see the difference.</p>
  <p>
    <label>
      This one scrolls on wheel when active. <br>
      <input type="number" value="0" class="scroll" />
    </label>
  </p>
  <p>
    <label>
      This one doesn't scroll on wheel when active. <br>
      <input type="number" value="0" class="noscroll" />
    </label>
  </p>
</form>

CSS

input[type="number"] {
  zoom: 1.5;
}

p.instructions {
  font-weight: bold;
}

JavaScript

document.addEventListener("wheel", function(event) {
  if (document.activeElement.type === "number" &&
    document.activeElement.classList.contains("noscroll")) {
    document.activeElement.blur();
  }
});