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;">
            w3wiki
        </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:

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

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:

Table of Content

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

Tags:

#JavaScript-Questions #JavaScript #Web Technologies

By using replace(), isNan() function:

By using ASCII Value

HTML

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

Similar Reads

Contact Us