144
Views
5
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.

2022-03-07 10-26-37
Vera Jonkers
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/


2021-03-05 13-56-11
Ricardo Pereira
 
MVP

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

2022-03-07 10-26-37
Vera Jonkers

Thanks for the pointer Ricardo.

2022-03-07 10-26-37
Vera Jonkers
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/


UserImage.jpg
André Oliveira

Hi, 
This solution solves the problem but for me it creates another issue.
The fact that you use blur() makes it so that you loose focus on the input and this wasn't intended from the start. Yes it's a minor detail but in terms of usabilitty this might not be what you desire. 
I came up with another solution. 
On the layout, on the OnReady you can add a javascript with this code:
My solution focus specifically the active screen because in my case that's where I have scroll. But you can target whatever you want.

var elem = document.querySelector('.active-screen'), marker = true, delta, direction, interval = 30, counter1 = 0, counter2, lastInput;if (elem.addEventListener) {    if ('onwheel' in document)        elem.addEventListener('wheel', wheel);    else if ('onmousewheel' in document)        elem.addEventListener('mousewheel', wheel);    else        elem.addEventListener('MozMousePixelScroll', wheel);} else    elem.attachEvent('onmousewheel', wheel);function wheel(e) {    counter1 += 1;    e = e || window.event;    delta = e.deltaY || e.detail || e.wheelDelta;    if (Math.abs(delta) < 50)        return false    var newDir = delta > 0 ? 'up' : 'down';    if (delta > 0) {        direction = 'up';    } else {        direction = 'down';    }    if (marker)        wheelStart(e);    return false;}function wheelStart(event) {    marker = false;    wheelAct();    if (document.activeElement.type === "number") {        lastInput = document.activeElement;        document.activeElement.blur();    }}function wheelAct() {    counter2 = counter1;    setTimeout(function () {        if (counter2 == counter1 || Math.abs(delta) < 50) {            wheelEnd();        } else {            wheelAct();        }    }, interval);}function wheelEnd() {    marker = true,        counter1 = 0,        counter2 = 0;    lastInput.focus();}

Basically what this does is, detect when the user scrolls (on this case in the active-screen which is where I have my scroll). If the active element is an input of type number then save it's reference, so that when you stol scrolling you can focus him again.
I hope this helps. Happy coding ;D

UserImage.jpg
André Oliveira

The code I posted above makes it so that when you focus, the page tries to scroll to make th focused element visible. 
If you want to prevent that from happening go to the wheelEnd function and add prevent scroll on the focus:


function wheelEnd() {   
 marker = true,    
counter1 = 0,    
counter2 = 0;    
lastInput.focus({        preventScroll: true,    });
}

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