Introduction

Have you ever wanted to restrict the input in a textbox to only allow 4-digit numbers? In this tutorial, we will explore how to achieve this using JQuery, a popular JavaScript library. By following the steps below, you will be able to enhance the user experience on your website by ensuring that users can only enter valid 4-digit numbers.

Step:- Create a HTML Page

<!DOCTYPE html>
<html>
<head>
    <title>Allow only 4 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 4 numbers in textbox using Jquery - wizbrand</h1>
  <input type="text" name="phone" placeholder="4-digit numbers" 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>

Output:-

Hopefully, It will help you to set a password..!!!