2

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number">
Josiah
  • 3,008
  • 1
  • 34
  • 45

2 Answers2

6

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="menu">
0

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();
            }
        });
    });
Bernat
  • 1
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 18 '23 at 22:38