Similar to this question, I'm trying to prevent the scrollwheel form incrementing a numeric input.

In Chrome/webkit, the following works but in Firefox the wheel still changes the input.

$('input[type=number]').on('mousewheel',
    function(e){ $(this).blur(); }
);

<script src=".1.1/jquery.min.js"></script>
<input type="number">

Similar to this question, I'm trying to prevent the scrollwheel form incrementing a numeric input.

In Chrome/webkit, the following works but in Firefox the wheel still changes the input.

$('input[type=number]').on('mousewheel',
    function(e){ $(this).blur(); }
);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number">

• javascript
• jquery
• html
• css
• firefox

2 Answers 2

Yeah, it doesn't work with firefox. This should work though :) Hope it helps.

$('input[type=number]').on('wheel', function(e){
    return false;
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="menu">

I've found a better solution using vanilla Javascript:

    document.querySelectorAll("input[type=number]").forEach(function (element) {
        element.addEventListener("wheel", function(event) {
            if (document.activeElement === event.target) {
                event.preventDefault();
            }
        });
    });