How to Allow Only 4 Digits Numbers in Textbox using JQuery?

By Hardik Savani July 20, 2023 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: JQuery Radio Button Change Event Example
<!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