Jquery - Allow Only Numbers and 2 Decimal in Textbox Example

By Hardik Savani November 21, 2020 Category : jQuery

Hi All,

Now, let's see example of allow only numbers and 2 decimal in textbox jquery. In this article, we will implement a how to allow only 2 digits after decimal in jquery. step by step explain jquery allow only numbers with 2 decimal places. you can understand a concept of jquery allow only 2 decimal values in textbox. Let's get started with allow only 2 decimal values in textbox jquery.

In this example, i will take simple textbox and allow only enter float number with 2 decimal values. here i also added another example with allow only numbers and decimal in textbox jquery. so let's see both example and i hope it can help you.

Preview:

Example 1: Allow only numbers and 2 decimal in textbox jquery

<!DOCTYPE html>
<html>
<head>
    <title>Jquery Only Allow Input Float Number - ItSolutionStuff.com</title>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
  
<div class="container">
    <h1>Jquery Only Allow Input Float Number - ItSolutionStuff.com</h1>
    <input type="text" name="number" class="number" autocomplete="off">
</div>
  
</body>
  
<script type="text/javascript">
    $('.number').keypress(function(event) {
      if ((event.which != 46 || $(this).val().indexOf('.') != -1) &&
        ((event.which < 48 || event.which > 57) &&
          (event.which != 0 && event.which != 8))) {
        event.preventDefault();
      }
  
      var text = $(this).val();
  
      if ((text.indexOf('.') != -1) &&
        (text.substring(text.indexOf('.')).length > 2) &&
        (event.which != 0 && event.which != 8) &&
        ($(this)[0].selectionStart >= text.length - 2)) {
        event.preventDefault();
      }
    });
</script>
</html>

Example 2: Jquery Only Allow Input Float Number

Read Also: How to use jQuery in Angular 10 Projects?
<!DOCTYPE html>
<html>
<head>
    <title>Jquery Only Allow Input Float Number - ItSolutionStuff.com</title>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
  
<div class="container">
    <h1>Jquery Only Allow Input Float Number - ItSolutionStuff.com</h1>
    <input type="text" name="number" class="number" autocomplete="off">
</div>
  
</body>
  
<script type="text/javascript">
    $('.number').keypress(function(event) {
      if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
        event.preventDefault();
      }
    });
</script>
</html>

I hope it can help you...

Tags :
Previous

Jquery Only Allow Input Float Number Example
Next

Angular Scroll to Top of Div Element Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares