How do I prevent the mousewheel from incrementing and decrementing numeric inputs?
Question
Application Type
Reactive
Service Studio Version
11.9.0 (Build 33413)

Numeric input fields are incremented or decremented if the mouse wheel is used when the cursor is on the field.  This happens specifically when the user has edited or just clicked on a numeric field and then tries to scroll to a different part of the screen.

Solution

I have created a component web block that contains the following Javascript in its OnReady event, which stops mousewheel number scrolling:

var inputTypeNumbers = document.querySelectorAll("input[type=number]");

for (var a = 0; a < inputTypeNumbers.length; a++) {

    inputTypeNumbers[a].onwheel = function (event) {

        event.target.blur();

    };

}


Credit to http://adnan-tech.com/javascript-disable-scroll-on-input-type-number/


Hi, 

Maybe you can try it with some JS:

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


Maybe you need to adapt it, I can't reproduce that behavior.

Hope this can help.


Best regards,

Ricardo M Pereira

Thanks for the pointer Ricardo.

Solution

I have created a component web block that contains the following Javascript in its OnReady event, which stops mousewheel number scrolling:

var inputTypeNumbers = document.querySelectorAll("input[type=number]");

for (var a = 0; a < inputTypeNumbers.length; a++) {

    inputTypeNumbers[a].onwheel = function (event) {

        event.target.blur();

    };

}


Credit to http://adnan-tech.com/javascript-disable-scroll-on-input-type-number/


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.