CODEWITHSUNDEEP
javascriptjquery
anirban karak
anirban karak

Reputation: 740

Allow 2 digit number after the decimal

Hi i am trying to restrict user to input 2 digit number after the decimal.The below functionality is working but i am not able to modify the last two digit.suppose I have entered number 3456.78 and i want to modify 3456.68 it is not allowing.

$('.PMT_AMT').keypress(function(event) {

  var $this = $(this);
  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 ((event.which == 46) && (text.indexOf('.') == -1)) {
    setTimeout(function() {
      if ($this.val().substring($this.val().indexOf('.')).length > 3) {
        $this.val($this.val().substring(0, $this.val().indexOf('.') + 3));
      }
    }, 1);
  }

  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 src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<input type="text" class="PMT_AMT">

Upvotes: 1

Views: 123

Answers (3)

Jonathan Gray
Jonathan Gray

Reputation: 2609

This solution creates a prediction and tests the regular expression against that instead.

$('.PMT_AMT').keypress(function(event) {
  if(!/^\d*(\.\d{0,2})?$/.test(
    this.value.slice(0, this.selectionStart)
    + String.fromCharCode(event.which)
    + this.value.slice(this.selectionEnd)
    )) event.preventDefault();
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<input type="text" class="PMT_AMT">

Upvotes: 1

Timen
Timen

Reputation: 56

Why use jQuery and not just browser functionality?

<input type="number" step="0.01">

On submit the browser will check if the submitted value of the input field has maximum two decimals.

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 371203

Here's one possibility that uses a regular expression. Save the old input value on keypress, and if the new value on keyup does not validate, reset to that old value.

You need to validate on keypress as well, because otherwise, if the user types very fast, an invalid value can be saved:

const re = /^\d+(\.\d{0,2})?$/;
let oldVal;
$('.PMT_AMT').keypress(function(event) {
  const { value } = this;
  if (re.test(value)) oldVal = value;
});
$('.PMT_AMT').keyup(function(event) {
  const newVal = this.value;
  if (!re.test(newVal)) this.value = oldVal;
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<input type="text" class="PMT_AMT">

Upvotes: 1

Related Questions