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

Last Updated : 16 Sep, 2024

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 Content

By using ASCII Value
By using replace(), isNan() function

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.