Question

我有一个表格，我想只允许数字和小数1位。这适用于Chrome和IE，但不适用于Firefox。它将从Firefox中删除点。我做错了什么？

$(document).on('change keyup', '.Monday, .Tuesday, .Wednesday, .Thursday, .Friday, .Saturday, .Sunday', function () {
  var sanitized = $(this).val().replace(/[^0-9.]/g, '');
  $(this).val(sanitized);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="form-control full-width Monday" name="monday" id="monday" type="number" />

Answer 1

看起来像Firefox中的一个错误。很容易确认它不是关于正则表达式：事实上，keyup处理程序中的任何重新分配似乎都会破坏它，从而有效地禁止了浮点数。例如（使用vanilla DOM API来防止潜在的副作用;当然，与jQuery相同）：

document.getElementById('demo').addEventListener('keyup', function() {
  var oldValue = this.value;
  console.log(oldValue);
  this.value = oldValue;
});

<input class="demo" id="demo" name="demo" type="number" />

请注意，keyup阶段的数字和非数字字符存在细微差别。例如，如果控件中已输入4，并按2，则记录的值将为42。但是，如果您按4，它仍为.。 Chrome和IE似乎无视这种差异，Firefox更为直白。

幸运的是，找到错误的解决方法非常容易 - 只需听取input事件（MDN docs）。不仅可以保证在值更改后触发，它还可以处理鼠标触发的复制粘贴等事情。

Answer 2

不同浏览器中<input type="number">元素的实现存在差异，但是当您使用它时，应该将其留给该元素来执行验证。它通过显示红色边框（依赖于实现）而不是取出无效字符来实现，因为大多数人认为后一种解决方案不是用户友好的 - 你不希望他们认为他们的键盘坏了。 / p>

您的案例中存在以下问题：

当你在一系列数字后面输入一个点，这个数字被你的代码认为是有效的，但是通过将它分配回输入，它被解释为一个数字，所以最后一个点被从中删除
当您首先输入一系列数字然后输入一个字母时，整个输入都会被清除。这是因为在Firefox中，您从输入中获得的值已经过验证，如果无效，则返回空字符串，即使输入仍显示字符。

事实上，你应该选择是将它留给浏览器还是代码以在输入中进行验证。在后一种情况下，只需删除type="number"。

正则表达式在chrome工作，但不是Firefox

2 个答案: