In this article, we are going to learn how can we force the Input field to enter numbers only using JavaScript.
These are the following approaches that will explain how to force input field force numbers:
Table of Content
By using ASCII Value:
- In this approach, we are going to use ASCII code for taking numeric values from the input fields.
- We will check if the given input value does not lie between the numeric ASCII code then we will not accept that value.
- If the value lie between those numeric ASCII value then we will accept the input value.
Example : This example is the implementation of the above-explained approach.
HTML
<!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;">
GeeksforGeeks
</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 detailssubmit() {
alert("Your details were Submitted");
}
function onlyNumberKey(evt) {
// Only ASCII character in that range allowed
let ASCIICode = (evt.which) ? evt.which : evt.keyCode
if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
return false;
return true;
}
</script>
</body>
</html>
|
Output:
By using replace(), isNan() function:
- In this approach, we are taking input from input from input filed having type text.
- On submission we are chechking whether the value is valid a valid number or not and rendering response accrodingly.
- Also, we are replacing the given value by reducing it to only numeric value.
Example : This example is the implementation of the above-explained approach.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;padding:13px;">
GeeksforGeeks</h1>
<h3>
Input[type=text] allow only
Numeric Value Example
</h3>
<br>
<form autocomplete="off" id="form1">
<b>Enter 4-digit Pin:</b>
<input type="text" name="numonly"
maxlength="4">
<br>
<br>
<b>Enter passkey:</b>
<input type="text" name="passkey" id="num"
oninput="return onlynum()" minlength="2">
</form>
</center>
<script>
$(function () {
$("input[name='numonly']").on('input', function (e) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
});
function onlynum() {
let fm = document.getElementById("form2");
let ip = document.getElementById("num");
let tag = document.getElementById("value");
let 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>
</body>
</html>
|
Output: