How to restrict input box to allow only numbers and decimal point JavaScript?

Last Updated : 26 Dec, 2023

The task is to validate the input when the user is typing something in the input box. Here we are allowing only decimal and integers but not any other symbol. Here are a few techniques discussed.

Below are the approaches to restrict the input box to allow only numbers and decimal point JavaScript:

Table of Content

Using JavaScript
Using JQuery

Approach 1: Using JavaScript

A RegExp to verify the input.
Each time a character is entered, the whole input is matched with the RegExp to check validity.
If it is valid, make the character valid and add it to the input else not.

Example 1: This example uses the approach discussed above using JavaScript.

html

<!DOCTYPE HTML>
<html>
 
<head>
    <title>
        How to restrict input box to allow
        only numbers and decimal point JavaScript?
    </title>
</head>
 
<body style="text-align:center;" id="body">
 
    <h1 id="h1" style="color:green;">
        GeeksForGeeks
    </h1>
    <p id="GFG_UP" style="font-size: 15px; 
            font-weight: bold;">
    </p>
    <form>
        Type Here:
        <input id="input" oninput="valid(this)"
               type="text">
    </form>
    <br>
    <p id="GFG_DOWN" style="font-size: 23px;
            font-weight: bold; 
            color: green; ">
    </p>
    <script>
        let el_up = document.getElementById("GFG_UP");
        let el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML =
"Type in the box to see whether the input is valid or not.";
        let RegExp = new RegExp(/^\d*\.?\d*$/);
        let val = document.getElementById("input").value;
 
        function valid(elem) {
            if (RegExp.test(elem.value)) {
                val = elem.value;
                el_down.innerHTML = "Typed Valid Character.";
            } else {
                elem.value = val;
                el_down.innerHTML = "Typed Invalid Character.";
            }
        }
    </script>
</body>
 
</html>

Output:

sdasfasfsdfsdfsdfsdfsdfsdffffffffffffffffffffff

Approach 2: Using JQuery

Each time a character is entered, This character is checked whether this is valid or not.
This example is also checking the number of decimal entered, one can not enter 2 decimals.
If the character is valid, add to the input else not.

Example 2: This example using the approach discussed above using JQuery.

html

<!DOCTYPE HTML>
<html>
 
<head>
    <title>
        How to restrict input box to allow
        only numbers and decimal point JavaScript?
    </title>
</head>
 
<body style="text-align:center;" id="body">
    <h1 id="h1" style="color:green;">
        GeeksForGeeks
    </h1>
    <p id="GFG_UP" style="font-size: 15px; 
            font-weight: bold;">
    </p>
    <form>
        Type Here:
        <input id="input" onkeypress="return GFG_Fun(this, event)"
               type="text">
    </form>
    <br>
    <p id="GFG_DOWN" style="font-size: 23px; 
            font-weight: bold; 
            color: green; ">
    </p>
    <script>
        let el_up = document.getElementById("GFG_UP");
        let el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML =
"Type in the box to see whether the input is valid or not.";
 
        function isValid(el, event) {
            let charC = (event.which) ? event.which : event.keyCode;
            if (charC == 46) {
                if (el.value.indexOf('.') === -1) {
                    return true;
                } else {
                    return false;
                }
            } else {
                if (charC > 31 && (charC < 48 || charC > 57))
                    return false;
            }
            return true;
        }
 
        function GFG_Fun(t, event) {
            let a = isValid(t, event);
            if (a) {
                el_down.innerHTML = "Typed Valid Character.";
            } else {
                el_down.innerHTML = "Typed Invalid Character.";
            }
            return a;
        }
    </script>
</body>
 
</html>