HTML 5 input field has attribute type=”number” that is used to get input in numeric format. Now forcing input field type=”text” to accept numeric values only by using Javascript or jQuery.
The following examples will explain how to force input field force numbers.
- By using ASCII code
- By using replace(), isNan() function
Definition and Usage
The <input type="number">
defines a field for entering a number.
Use the following attributes to specify restrictions:
- max – specifies the maximum value allowed
- min – specifies the minimum value allowed
- step – specifies the legal number intervals
- value – Specifies the default value
Tip: Always add the <label>
tag for best accessibility practices!
Example below illustrate Input[type=”text”] allow only Numeric Value using Javascript with the help of ASCII code.
<!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;"> Interset Form Validation </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> </body> <script> function onlyNumberKey(evt) { // Only ASCII character in that range allowed var ASCIICode = (evt.which) ? evt.which : evt.keyCode if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57)) return false; return true; } </script> <script> function detailssubmit() { alert("Your details were Submitted"); } </script> </html>