Disable scroll on all inputs type number

Question

I want to disable all scroll events on all inputs type number.

I saw some examples to do this but all the examples are only for one element

input = document.getElementById("the_number_input")
input.addEventListener("mousewheel", function(event){ this.blur() })

Or with Jquery

$('form').on('focus', 'input[type=number]', function (e) {
  $(this).on('wheel.disableScroll', function (e) {
    e.preventDefault()
  })
})
$('form').on('blur', 'input[type=number]', function (e) {
  $(this).off('wheel.disableScroll')
})

There is a solution with vanilla javascript?

score 0 · Accepted Answer · answered Oct 08 '19 at 00:59

With the help from this question: How to disable scrolling temporarily? it was pretty easy to make a working concept:

var keys = {37: 1, 38: 1, 39: 1, 40: 1};

// Select all input elements
var inputElems = document.getElementsByTagName('input');

// Turn them into an array
inputElems = Array.prototype.slice.call(inputElems);

// Create event listeners for input elements where type equals number
inputElems.forEach(function(elem) {
 if(elem.type.toLowerCase() == 'number') {
   elem.addEventListener('focus', disableScroll, false);
    elem.addEventListener('blur', enableScroll, false);
  }
});

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function preventDefaultForScrollKeys(e) {
    if (keys[e.keyCode]) {
        preventDefault(e);
        return false;
    }
}

function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  document.addEventListener('wheel', preventDefault, {passive: false}); // Disable scrolling in Chrome
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

function enableScroll() {
    if (window.removeEventListener)
        window.removeEventListener('DOMMouseScroll', preventDefault, false);
    document.removeEventListener('wheel', preventDefault, {passive: false}); // Enable scrolling in Chrome
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null;  
    document.onkeydown = null;  
}

#container {
  height: 300px;
  width: 300px;
  overflow: auto;
}

#inputs {
  height: 1000px;
  width: 300px;
}

<div id="container">
  <div id="inputs">
    <input type="text" value="This is a text input"/><br/>
    <input type="number"/><br/>
    <input type="number"/><br/>
    <input type="number"/><br/>
    <input type="number"/>
  </div>
</div>

When focus is on one of the input fields with a number type, it will disable scrolling. On blur it'll enable it again. Please keep in mind that this will not prevent a user from manually dragging a scrollbar down with the mouse. It's impossible to disable that.

It seems like a heavy solution, but I think thanks to this I choose to not disable the scrolling it's not worth — BlueSeph, Oct 08 '19 at 01:37
@BlueSeph You're welcome. Don't be overwhelmed by the amount of code though. That says nothing about it being "heavy" or not. You can have a javascript file with 10.000 lines of code that still runs a lot faster than one with single line that does some very heavy regex or file reading. The code in here just creates and removes event listeners. That's all. It'll not have a noticable impact on performance :) Unless you have thousends of input fields.. in which case you should probably look at that instead. — icecub, Oct 08 '19 at 01:45

Disable scroll on all inputs type number

1 Answers1