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>
