Jquery - How to allow only 4 digit numbers in html textbox?
In this post, we will learn allow only 4 digits in textbox jquery html. we will use regex to allow only 4 digits. we just allow only 4 digits in input box using html jquery. you can use this validation with 2 digits, 3 digits, 8 digits etc.
So basically, if you need to to restrict user to enter only 4 numbers in textbox using jquery then this example will help you.
One it using pattern attribute in html and another is maxlength and jquery keypress event. So you can just see both example. You can see also preview bellow. You can use anyone as you want.
So let's see both example, that will help you to set validation for mobile number:
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>Allow only 4 numbers in textbox using Jquery - ItSolutionStuff.com</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form>
<h1>Allow only 4 numbers in textbox using Jquery - ItSolutionStuff.com</h1>
<input type="text" name="phone" placeholder="Phone..." pattern="[1-9]{1}[0-9]{3}">
<button type="submit">Submit</button>
</form>
</body>
</html>
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>Allow only 4 numbers in textbox using Jquery - ItSolutionStuff.com</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form>
<h1>Allow only 4 numbers in textbox using Jquery - ItSolutionStuff.com</h1>
<input type="text" name="phone" placeholder="Phone..." maxlength="4" 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>
I hope it can help you...

Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- Jquery Remove Multiple Values from Array Example
- How to change date format in jquery using moment JS ?
- How to add custom jquery validation for image file upload in summernote ?
- Automatically Refresh or Reload a Page using jQuery Example
- How to get gravatar image from email using Jquery?
- How to stop setinterval() after sometimes in jquery?
- Jquery Select2 - Select box with search example code
- Automatically Scroll to Bottom of Div JQuery Example
- Check and Uncheck All Checkbox using JQuery Example