Jquery - How to allow only 4 digit numbers in html textbox?

By Hardik Savani September 6, 2020 Category : jQuery

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:

Read Also: Allow only 10 numbers in textbox using Jquery
<!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...

Tags :

We are Recommending you

Popular Posts

Categories

Latest Posts