How to disable scroll to change number in <input type="number"> field using JavaScript/jQuery? Last Updated : 10 Aug, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report Given an HTML document containing <input type = "number"> attribute and the task is to disable the mouse scroll wheel to change the number value using JavaScript/jQuery. Approach: Select the element.Add an event to that element which will call a function when scrolling starts.Make the element disabled on scrolling.Example 1: This example implements the above approach using JavaScript. html <!DOCTYPE HTML> <html> <head> <title> How to disable scroll to change number value in input type="number" attribute in JavaScript/jQuery? </title> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Click on the button to disable scrolling on input element </h3> <form> <input id="input" type="number" /> </form> <br> <button onclick="GFG_Fun()"> Click Here </button> <h3 id="GFG" style="color: green;"></h3> <script> let result = document.getElementById("GFG"); function GFG_Fun() { let input = document.getElementById("input"); input.addEventListener("mousewheel", function (event) { this.blur() }); result.innerHTML = "Mouse wheel disabled!"; } </script> </body> </html> Output: Example 2: This example implements the above approach using jQuery. html <!DOCTYPE HTML> <html> <head> <title> How to disable scroll to change number value in input type="number" attribute in JavaScript/jQuery? </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Click on the button to disable scrolling on input element </h3> <form> <input id="input" type="number" /> </form> <br> <button onclick="GFG_FUN()"> Click Here </button> <h3 id="GFG" style="color: green;"> </h3> <script> let elm = document.getElementById("GFG"); function GFG_FUN() { $('#input').on("wheel", function (e) { $(this).blur(); }); el_down.innerHTML = "Mouse wheel disabled!"; } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create a Disabled Input using jQuery Mobile ? P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions jQuery-Questions Similar Reads How to force Input field to enter numbers only using JavaScript ? We are going to learn how can we force the Input field to enter numbers only using JavaScript. Below are the approaches to force input field force numbers using JavaScript:Table of ContentBy using ASCII ValueBy using replace(), isNan() functionBy using ASCII ValueIn this approach, we are going to us 3 min read How to Restrict Input to Numbers and Decimals in JavaScript? Restricting an input box to allow only numbers and decimal points involves setting up validation rules that ensure users can only enter numerical values and decimal separators. This helps maintain data integrity and prevents invalid entries in forms or user input fields.Below are the approaches to r 3 min read How to disable arrow key in textarea using JavaScript ? Given an HTML element containing the <textarea> element and the task is to disable scrolling through arrow keys with the help of JavaScript. Approach 1: Add an event listener onkeydown on the window.If the event happens then check if the keys are arrow or not.If arrow key is pressed then preve 3 min read How to create a Disabled Input using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Disabled Input using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†hre 1 min read How to create a Number Input using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops In this article, we will be creating a number input area using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†h 1 min read How to Disable Scrolling Temporarily using JavaScript? Disabling scrolling temporarily using JavaScript means preventing users from scrolling a webpage during specific interactions, such as when a modal is open or a loading screen is displayed. Scrolling can be disabled using JavaScript using 2 methods:Table of ContentUsing window.onscroll functionSetti 2 min read Like