Question

嗨，我正在尝试限制用户在小数点后输入2位数字。以下功能正常工作，但我无法修改最后两位数字。假设我已输入数字3456.78，我想修改3456.68，这是不允许。

$('.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">

Answer 1

这里是使用正则表达式的一种可能性。将旧的输入值保存在keypress上，如果keyup上的新值无效，请重置为该旧值。

您还需要在keypress上进行验证，因为否则，如果用户输入速度很快，则可以保存无效值：

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

Answer 2

此解决方案将创建一个预测并针对该预测测试正则表达式。

$('.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">

Answer 3

为什么要使用jQuery而不仅仅是浏览器功能？

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

提交时，浏览器将检查输入字段的提交值是否最多两位小数。

允许小数点后两位数字

3 个答案: