Open In App

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

Last Updated : 10 Aug, 2023
Improve
Improve
Like Article
Like
Save
Share
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:

disableMouseWheel

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=
    </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:

disableMouseWheel



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads