Today, We want to share with you allow only numbers in textbox javascript onkeypress.In this post we will show you allow only 10 numbers in textbox using jquery, hear for textbox allow only numbers 1 to 100 jquery we will give you demo and example for implement.In this post, we will learn about how to allow only 10 digit mobile number validation using javascript with jquery with an example.

JQuery – Allow only numeric values (numbers) in Textbox

Contents

Example 1: index.html

<!DOCTYPE html>
<html>
<head>
  <title>JQuery - Allow only numeric values (numbers) in Textbox - www.pakainfo.com</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
   
<div class="container">
  <h3>JQuery - Allow only numeric values (numbers) in Textbox - pakainfo.com</h3>
         
      <label>Enter Value:</label>
      <input type="text" name="mobile_number" class="only-numeric" >
      <span class="error" style="color: red; display: none">* Input digits (0 - 9)</span>
    
</div>
    
<script type="text/javascript">
    
    $(document).ready(function() {
      $(".only-numeric").bind("keypress", function (e) {
          var keyCode = e.which ? e.which : e.keyCode
               
          if (!(keyCode >= 48 && keyCode <= 57)) {
            $(".error").css("display", "inline");
            return false;
          }else{
            $(".error").css("display", "none");
          }
      });
    });
     
</script>
      
</body>
</html>

Example 2:

<!DOCTYPE html>
<html>
<head>
  <title>JQuery - Allow only numeric values in Textbox - pakainfo.com</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
   
<div class="container">
  <h1>JQuery - Allow only numeric values in Textbox - pakainfo.com</h1>
         
      <label>Enter Value:</label>
      <input type="text" name="mobile_number" class="check-string-data" >
      <span class="error" style="color: red; display: none">* Input digits (0 - 9)</span>
    
</div>
    
<script type="text/javascript">
    
    $(document).ready(function() {
      $(".check-string-data").bind("keypress", function (e) {
          var keyCode = e.which ? e.which : e.keyCode
               
          if (!(keyCode >= 48 && keyCode <= 57)) {
            $(".error").css("display", "inline");
            return false;
          }else{
            $(".error").css("display", "none");
          }
      });
    });
     
</script>
      
</body>
</html>

Example 3:

<!DOCTYPE html>
<html>
<head>
  <title>JQuery - Allow only numeric values Textbox - pakainfo.com</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
   
<div class="container">
  <h2>JQuery - Allow only numeric values in Textbox - pakainfo.com</h2>
         
      <label>Enter Value:</label>
      <input type="text" name="mobile_number" class="check-string-data" >
      <span class="error" style="color: red; display: none">* Input digits (0 - 9)</span>
    
</div>
    
<script type="text/javascript">
    
    $(document).ready(function() {
      $(".check-string-data").on("keypress keyup blur",function (event) {    
           $(this).val($(this).val().replace(/[^\d].+/, ""));
            if ((event.which < 48 || event.which > 57)) {
                $(".error").css("display", "inline");
                event.preventDefault();
            }else{
            	$(".error").css("display", "none");
            }
        });
    });
     
</script>
      
</body>
</html>

I hope you get an idea about allow only 4 digits in textbox jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

JQuery – Allow only numeric values (numbers) in Textbox

Related posts: