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:-