Disable scrolling on ``

Disable scrolling on ``

Is it possible to disable the scroll wheel changing the number in an input number field?
I’ve messed with webkit-specific CSS to remove the spinner but I’d like to get rid of this behavior altogether. I like using type=number since it brings up a nice keyboard on iOS.

Solutions/Answers:

Solution 1:

Prevent the default behavior of the mousewheel event on input-number elements like suggested by others (calling “blur()” would normally not be the preferred way to do it, because that wouldn’t be, what the user wants).

BUT. I would avoid listening for the mousewheel event on all input-number elements all the time and only do it, when the element is in focus (that’s when the problem exists). Otherwise the user cannot scroll the page when the mouse pointer is anywhere over a input-number element.

Solution for jQuery:

// disable mousewheel on a input number field when in focus
// (to prevent Cromium browsers change the value when scrolling)
$('form').on('focus', 'input[type=number]', function (e) {
  $(this).on('mousewheel.disableScroll', function (e) {
    e.preventDefault()
  })
})
$('form').on('blur', 'input[type=number]', function (e) {
  $(this).off('mousewheel.disableScroll')
})

(Delegate focus events to the surrounding form element – to avoid to many event listeners, which are bad for performance.)

Solution 2:

$(document).on("wheel", "input[type=number]", function (e) {
    $(this).blur();
});

Solution 3:

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

http://jsfiddle.net/bQbDm/2/

For jQuery example and a cross-browser solution see related question:

HTML5 event listener for number input scroll – Chrome only

Solution 4:

@Semyon Perepelitsa

There is a better solution for this. Blur removes the focus from the input and that is a side affect that you do not want. You should use evt.preventDefault instead. This prevents the default behavior of the input when the user scrolls. Here is the code:

input = document.getElementById("the_number_input")
input.addEventListener("mousewheel", function(evt){ evt.preventDefault(); })

Solution 5:

One event listener to rule them all

This is similar to @Semyon Perepelitsa’s answer in pure js, but a bit simpler, as it puts one event listener on the document element and check if the focused element is a number input:

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

If you want to turn off the value scrolling behaviour on some fields, but not others just do this instead:

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

with this:

<input type="number" class="noscroll"/>

If an input has the noscroll class it wont change on scroll, otherwise everything stays the same.

Solution 6:

First you must stop the mousewheel event by either:

  1. Disabling it with mousewheel.disableScroll
  2. Intercepting it with e.preventDefault();
  3. By removing focus from the element el.blur();

The first two approaches both stop the window from scrolling and the last removes focus from the element; both of which are undesirable outcomes.

One workaround is to use el.blur() and refocus the element after a delay:

$('input[type=number]').on('mousewheel', function(){
  var el = $(this);
  el.blur();
  setTimeout(function(){
    el.focus();
  }, 10);
});