In this article, you will learn how to restrict an HTML input textBox to allow only numeric values using Javascript or JQuery. By default, the HTML5 input field has attribute type="number" that is used to get input in numeric format only. Now restrict an HTML5 input field type="text" to accept numeric values only by using Javascript or jQuery. You can also set the type="tel" attribute in the input field that will popup the numeric keyboard on mobile devices. There are various ways to restrict an HTML input field to take input only in numeric values such as: By using ASCII code, or By using regular Expression.
In this example, you’ll learn how to restrict an HTML5 input[type="text"] to numeric values only 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" />
<title>How to Restrict HTML input textBox to allow only numeric values using ASCII Code - Tutorialsrack.com</title>
<style>
div {
width: 50%;
border: 2px solid black;
padding: 15px;
position: relative;
left: 25%;
right: 25%;
}
</style>
</head>
<body>
<center>
<h1 style="color: Black; padding: 13px;"><span style="color: purple;">Tutorials</span>Rack</h1>
<h3>
Restrict HTML input textBox to allow only numeric values using ASCII Code
</h3>
</center>
<div class="container">
<form name="inputnumber" autocomplete="off">
<b>Register No:</b>
<input type="text" onkeypress="return onlyNumberKey(event)" maxlength="11" />
<br />
<br />
<b>Ph. Number:</b>
<input type="tel" onkeypress="return onlyNumberKey(event)" />
</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)) {
alert("Only numbers are allowed!");
return false;
}
return true;
}
</script>
</html>
In this example, you’ll learn how to restrict an HTML5 input[type="text"] to numeric values only using Javascript with the help of regular expression.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>How to Restrict HTML input textBox to allow only numeric values using Regular Expression - Tutorialsrack.com</title>
<style>
div {
width: 50%;
border: 2px solid black;
padding: 15px;
position: relative;
left: 25%;
right: 25%;
}
</style>
</head>
<body>
<center>
<h1 style="color: Black; padding: 13px;"><span style="color: purple;">Tutorials</span>Rack</h1>
<h3>
Restrict HTML input textBox to allow only numeric values using Regular Expression
</h3>
</center>
<div class="container">
<form name="inputnumber" autocomplete="off">
<b>Register No:</b>
<input type="text" class="numOnly" onkeypress="return onlyNumberKey(event);" maxlength="11" />
<br />
<br />
<b>Ph. Number:</b>
<input type="tel" class="numOnly" onkeypress="return onlyNumberKey(event);" />
</form>
</div>
</body>
<script>
function onlyNumberKey(e) {
var charCode = e.which ? e.which : event.keyCode;
if (String.fromCharCode(charCode).match(/[^0-9]/g)) {
alert("Only numbers are allowed!");
return false;
}
return true;
}
</script>
</html>
I hope this article will help you to understand how to restrict an HTML input textBox to allow only numeric values using javascript or Jquery.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments