Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In this article, we are going to learn how can we force the Input field to enter numbers only using JavaScript.

These are the following approaches that will explain how to force input field force numbers:

By using ASCII Value:

  • In this approach, we are going to use ASCII code for taking numeric values from the input fields.
  • We will check if the given input value does not lie between the numeric ASCII code then we will not accept that value.
  • If the value lie between those numeric ASCII value then we will accept the input value.

Example : This example is the implementation of the above-explained approach.

HTML




<!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>
    <script>
        function detailssubmit() {
            alert("Your details were Submitted");
        }
        function onlyNumberKey(evt) {
 
            // Only ASCII character in that range allowed
            let ASCIICode = (evt.which) ? evt.which : evt.keyCode
            if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
                return false;
            return true;
        }
    </script>
</body>
 
</html>


Output:

By using replace(), isNan() function:

  • In this approach, we are taking input from input from input filed having type text.
  • On submission we are chechking whether the value is valid a valid number or not and rendering response accrodingly.
  • Also, we are replacing the given value by reducing it to only numeric value.

Example : This example is the implementation of the above-explained approach.

HTML




<!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>
    <script>
        $(function () {
            $("input[name='numonly']").on('input', function (e) {
                $(this).val($(this).val().replace(/[^0-9]/g, ''));
            });
        });
        function onlynum() {
            let fm = document.getElementById("form2");
            let ip = document.getElementById("num");
            let tag = document.getElementById("value");
            let 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>
</body>
 
</html>


Output: 



Last Updated : 24 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads