Introduction
Have you ever encountered a situation where you wanted to restrict the input in a textbox to only 10-digit numbers? In this blog post, we will explore how to achieve this using JQuery, a popular JavaScript library. So, let’s dive in and learn how to implement this functionality in a simple and effective way!
Step 1:- Create a html page
<!DOCTYPE html>
<html>
<head>
<title>Allow only 10 numbers in textbox using Jquery - wizbrand</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form>
<h1>Allow only 10 numbers in textbox using Jquery - wizbrand</h1>
<input type="text" name="phone" placeholder="Phone..." maxlength="10" class="phone">
<button type="submit">Submit</button>
</form>
</body>
<script type="text/javascript">
$('.phone').keypress(function(e) {
var arr = [];
var kk = e.which;
for (i = 48; i < 58; i++)
arr.push(i);
if (!(arr.indexOf(kk)>=0))
e.preventDefault();
});
</script>
</html>
Output:-
