77
Views
4
Comments
Solved
Disabling Scroll-Triggered Value Changes in Number Input Fields

Good morning everyone,

I hope you can help me; I have a problem with the number type inputs. What happens is that I enter the value using the keyboard, but if for some reason my cursor is inside the input and I scroll down with the mouse, the value of the input changes.




How do I disable this option?

Thank you.

2024-03-14 12-00-57
Carlos Costa
Solution

Hello Cristian,


This code applies to all the inputs with type “number”


if(document.activeElement.type === "number"){
        document.activeElement.blur();    
   }

2024-03-14 12-00-57
Carlos Costa

Hello Cristian,

You can use the following javascript to prevent the wheel on input numbers:


document.addEventListener("wheel", function(event){ 
   if(document.activeElement.type === "number"){
        document.activeElement.blur();    
   }
});

If you just want some of the inputs to be restricted, you can use the activeElement and the class selector for example

https://jsfiddle.net/rakmanyi_peter/tvu1e79m/

2022-03-10 08-26-10
Cristian Angel Puma Villalva


Thank you, Carlos. And how do I specify that it applies to all numeric input types within my form? 

2024-03-14 12-00-57
Carlos Costa
Solution

Hello Cristian,


This code applies to all the inputs with type “number”


if(document.activeElement.type === "number"){
        document.activeElement.blur();    
   }

UserImage.jpg
Max Winter Leinweber

I am facing the same issue in my application.


How is the above code applied to the application to fix the issue?

Do you add it to the 'Required Scripts' section of the target block / page?

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