As there are many ways to force the input field to take input-only numbers. The two methods by which we can do one of which is using by ASCII code and other is by using the replace() or isNaN() fn.
First method : The example below illustrate Input[type=”text”] allows only Numeric Value using Javascript with the help of ASCII code.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
<center>
<h1 style="color:green;padding:13px;">
Sarvshrestha
</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 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>
</body>
</html>Second Method: Example below illustrates Input[type=”text”] allow only Numeric Value using Javascript with the help of jQuery’s replace() method and javascript’s isNaN()function.
<script>
$(function() {
$("input[name='numonly']").on('input', function(e) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
});
</script>
<script>
function onlynum() {
var fm = document.getElementById("form2");
var ip = document.getElementById("num");
var tag = document.getElementById("value");
var res = ip.value;
if (res != '') {
if (isNaN(res)) {
// Set input value empty
ip.value = "";
// Reset the form
fm.reset();
return false;
} else {
return true
}
}
}
</script>