如何使用jQuery防止用户键入过多的小数点？

我正在尝试编写一个jQuery插件，以防止用户键入超过2位小数的数字。具体而言：

• 如果一个输入包含

  12

  ，并且用户在最后键入

  3

  ，则它应该可以工作
• 如果输入包含

  12.34

  ，并且用户在末尾键入

  1

  ，不应发生任何事情
• 如果输入包含

  12.34

  ，并且用户在开始时键入

  1

  ，则该输入应该可以工作

以下是我遇到的问题：

• 如果我绑定到

  按键

  ，我不知道“建议的新值”是什么

  $（this）.val（）

  是用户按键前的值，我不知道用户在输入字段中键入的位置
• 如果绑定到

  keyup

  ，

  $（this）.val（）

  是新值，但它已经出现在文本输入中。如果小数点太多，我可以删除它，但它看起来有问题

我如何才能做到这一点？

适合我的解决方案 这是我想到的

赞成的意见

• 小数点过多的地方根本不会出现（与出现并立即擦除相反）
• 用户也不能输入多个小数

欺骗 这个解决方案依赖于其他两个jQuery插件，但我的项目中已经有了它们

• 我正在使用

  jQuery.maskedInput

  中的

  caret（）

  函数来确定用户在输入框中键入的位置
• 我已经在此输入上使用了

  jQuery.keyfilter

  ，以确保只允许在其中键入

  1-9

  和
  。（不过，它只考虑单个按键，而不考虑结果输入内容。）

代码 支持功能：

hasNDecimalPlaces = function (number, places) {
  fixed = parseFloat(number).toFixed(places);
  return number.toString() === fixed;
};

这是我的吗

jQuery.fn.limitDecimalPlaces = function(maxPlaces) {
  $(this).on('keyup', function(e) {
    integer = e.target.value.split('.')[0],
    mantissa = e.target.value.split('.')[1];

    if (typeof mantissa === 'undefined') {
      mantissa = '';
    }

    if (mantissa.length > maxPlaces) {
      e.target.value = integer + '.' + mantissa.substring(0, maxPlaces);
    }
  });
}

---

在

进行测试和工作时，您是否尝试过

onkeydown

？@Ryan-是的，但我看不出

keydown

在这方面与

keypress

有什么不同。如果我按下一个键，

keydown

继续启动，但

keypress

只启动一次；这就是我所能看到的不同之处。这可以接受吗@ŠimeVidas-让我输入

12.34

并按住

5

；只有当我放手时，

5

s才会消失。我还可以键入

12.34.56…..7

@NathanLong，这是因为处理程序在keyup上触发了-这就是为什么我问演示是否可以接受。关于这两点，演示不会阻止您输入非数值。例如，您还可以键入

ABC…

。在你的问题中，你写了“禁止用户键入数字…”。您没有说明也应该禁止输入非数值。如果您有

23.45

，并且用户在开始时键入

1

，会发生什么情况？没有异常。以2的

maxPlaces

为例，小数点距离字符串的末尾还有两位数，因此允许用户将1添加到字符串的开头。如果将其添加到末尾，则会失败，因为这会将小数点位置移离字符串末尾的距离超过

maxPlaces

。在这里进行测试--当我指定2时，我可以输入3个小数点位置，一旦我这样做，在删除小数点右侧的一个字符之前，我无法添加小数点左侧的任何内容。皮特-希望您不介意我的编辑；我结合了你的插件和你更新的代码。接受你的答案，因为它比我的简单。有两个缺点：1）在被擦除之前，额外的小数位会立即出现2）如果我有

12.45

并在小数位之后输入

3

，则

5

会被擦除（而不是

3

）。不过，我认为这些都是简单的折衷办法，可能是比我更好的一般案例解决方案。另外，谢谢你教我“尾数”这个词。我只想一遍又一遍地说。“尾数，伙计……蒂萨。”：）

jQuery.fn.limitDecimalPlaces = function(maxPlaces) {
  $(this).on('keyup', function(e) {
    integer = e.target.value.split('.')[0],
    mantissa = e.target.value.split('.')[1];

    if (typeof mantissa === 'undefined') {
      mantissa = '';
    }

    if (mantissa.length > maxPlaces) {
      e.target.value = integer + '.' + mantissa.substring(0, maxPlaces);
    }
  });
}