15
Views
3
Comments
Solved
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.

Rank: #7002
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/


Rank: #100

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

Rank: #7002
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/