How to force Input field to enter numbers only using JavaScript ?

By default, HTML 5 input field has attribute type=”number” that is used to get input in numeric format. Now forcing input field type=”text” to accept numeric values only by using Javascript or jQuery. You can also set type=”tel” attribute in the iput field that will popup numeric keyboard on mobile devices. There are so many other ways to force the input field to take input only numbers.

The following examples will explain how to force input field force numbers.

  • By using ASCII code
  • By using replace(), isNan() function

Example 1: Example below illustrate Input[type=”text”] allow only Numeric Value using Javascript with the help of ASCII code.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <style>
        div {
            width: 400px;
            height: 130px;
            border: 2px solid black;
            padding: 15px;
            position: absolute;
            left: 27%;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;padding:13px;">
          GeeksforGeeks
        </h1>
        <h3>
          Force input field to take only numbers as an input
        </h3>
    </center>
  
    <div class="container">
        <form name="inputnumber" 
              autocomplete="off">
            <b>Register No:</b>
            <input type="text" 
                   onkeypress="return onlyNumberKey(event)" 
                   maxlength="11" 
                   size="50%" />
  
            <br>
            <br>
            <b>Ph. Number:</b>
            <input type="tel" 
                   size="50%" 
                   onkeypress="return onlyNumberKey(event)" />
  
            <br>
            <br>
            <center>
                <b>Age:</b>
                <input type="number" 
                       placeholder=" Only 12+ allowed" 
                       min="12" />
                <input type="submit"
                       value="Submit" 
                       onclick="return detailssubmit()">
            </center>
        </form>
    </div>
</body>
<script>
    function onlyNumberKey(evt) {
          
        // Only ASCII charactar in that range allowed
        var ASCIICode = (evt.which) ? evt.which : evt.keyCode
        if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
            return false;
        return true;
    }
</script>
<script>
    function detailssubmit() {
        alert("Your details were Submitted");
    }
</script>
  
</html>

chevron_right


Output:

Example 2: Example below illustrates Input[type=”text”] allow only Numeric Value using Javascript with the help of jQuery’s replace() method and javascript’s isNaN()function.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
            "width=device-width, initial-scale=1">
    <script src="
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;padding:13px;">
         GeeksforGeeks</h1>
        <h3>
            Input[type=text] allow only
            Numeric Value Example
        </h3>
        <br>
  
        <form autocomplete="off" id="form1">
            <b>Enter 4-digit Pin:</b>
            <input type="text" name="numonly"
                   maxlength="4">
            <br>
            <br>
  
            <b>Enter passkey:</b>
            <input type="text" name="passkey"
                   id="num" 
                   oninput="return onlynum()"
                   minlength="2">
        </form>
  
    </center>
</body>
<script>
    $(function() {
        $("input[name='numonly']").on('input', function(e) {
            $(this).val($(this).val().replace(/[^0-9]/g, ''));
        });
    });
</script>
<script>
    function onlynum() {
        var fm = document.getElementById("form2");
        var ip = document.getElementById("num");
        var tag = document.getElementById("value");
        var res = ip.value;
  
        if (res != '') {
            if (isNaN(res)) {
                  
                // Set input value empty
                ip.value = "";
                  
                // Reset the form
                fm.reset();
                return false;
            } else {
                return true
            }
        }
    }
</script>
  
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.