How to disable scroll to change number in <input type="number"> field using JavaScript/jQuery? - GeeksforGeeks

17 Sep, 2019
Given an HTML document containing <input type = “number”> attribute and the task is to disable the mouse scroll wheel to change 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 blur on scrolling.
Example 1: This example implements the above approach using JavaScript.
<!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>          <p id = "GFG_UP" style =         "font-size: 15px; font-weight: bold;">    </p>          <form>        <input id = "input" type = "number" />    </form>          <br>          <button onclick = "GFG_FUN()">        click here    </button>          <p id = "GFG_DOWN" style =        "font-size: 24px; font-weight: bold; color: green;">    </p>          <script>        var el_up = document.getElementById("GFG_UP");        var el_down = document.getElementById("GFG_DOWN");                  el_up.innerHTML = "Click on the button to disable"                    + " scrolling on input element.";                  function GFG_FUN() {            var input = document.getElementById("input");                          input.addEventListener("mousewheel",                 function(event){                     this.blur()                 });                          el_down.innerHTML = "Mouse wheel disabled!";        }    </script> </body>    </html>
Output:
Before clicking on the button:
After clicking on the button:
Example 2: This example implements the above approach using jQuery.
<!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>          <p id = "GFG_UP" style =         "font-size: 15px; font-weight: bold;">    </p>          <form>        <input id = "input" type = "number" />    </form>          <br>          <button onclick = "GFG_FUN()">        click here    </button>          <p id = "GFG_DOWN" style =         "font-size: 24px; font-weight: bold; color: green;">    </p>          <script>        var el_up = document.getElementById("GFG_UP");        var el_down = document.getElementById("GFG_DOWN");                  el_up.innerHTML = "Click on the button to disable"                        + " scrolling on input element.";                  function GFG_FUN() {            $('#input').on("wheel", function (e) {                $(this).blur();            });                          el_down.innerHTML = "Mouse wheel disabled!";        }    </script> </body>    </html>
Output:
Before clicking on the button:
After clicking on the button:
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
How to get character array from string in JavaScript?
How to detect browser or tab closing in JavaScript ?
How to get selected value in dropdown list using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?