How to restrict input box to allow only numbers and decimal point JavaScript?
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;"> w3wiki </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:
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;"> w3wiki </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> |
Output: