I have a form which I want to only allow numbers and decimal 1 place. This works in Chrome and IE but not in Firefox. It will remove the dot from Firefox. What am I doing wrong?
我有一个只允许数字和小数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" />2 个解决方案
#1
1
Looks like a bug in Firefox. It's easy to confirm that it's not about regex: in fact, any reassignment in keyup handler seems to break it up, effectively disallowing floats. For example (done with vanilla DOM API to prevent potential side-effects; it's the same with jQuery, of course):
看起来像Firefox中的一个bug。很容易确定这不是关于regex的:事实上，keyup处理程序中的任何重新分配似乎都将其分解，从而有效地禁止浮动。例如(使用香草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" />Note that there's a subtle difference in keyup phase for numeric and non-numeric characters. For example, if there's already 4 entered in the control, and you press 2, the logged value will be 42. However, it still be 4 if you press . instead. Chrome and IE seem to disregard this difference, Firefox is a bit more straightforward.
注意，数字字符和非数字字符在关键字阶段有细微的区别。例如，如果控件中已经输入了4，按2，日志值将为42。然而，如果你按下它还是4。代替。Chrome和IE似乎忽视了这一点，Firefox更直接一些。
Fortunately, it's quite easy to find a workaround for the bug - just listen for input event instead (MDN docs). Not only it's guaranteed to fire after the value is changed, it also handles such things as mouse-triggered copy-paste.
幸运的是，很容易找到这个bug的解决方案——只需侦听输入事件(MDN文档)。它不仅保证在值更改后触发，还处理鼠标触发的复制粘贴。
#2
1
There are differences in implementation of the <input type="number"> element in different browsers, but when you use it, you should leave it to that element to perform the validation. And it does that by showing a red border (implementation dependent) instead of taking out invalid characters, because most believe that the latter solution is not user-friendly -- you don't want them to think their keyboard is broke.
在不同的浏览器中，元素的实现存在差异，但是当您使用它时，应该将执行验证的任务留给该元素。它通过显示红色边框(依赖于实现)而不是删除无效字符来实现这一点，因为大多数人认为后一种解决方案不友好——您不希望他们认为他们的键盘坏了。
There are the following issues playing in your case:
在你的案例中有以下问题:
-
When you type a point after a series of digits, that is considered valid by your code, but by assigning it back to the input, it is interpreted as a number, and so the final point is removed from it.
当您在一串数字后面输入一个点时，您的代码认为它是有效的，但是通过将它重新分配给输入，它将被解释为一个数字，因此最后一点将从它中删除。
-
When you first type a series of digits and then a letter the whole input gets cleared. This is because in Firefox the value you get from the input is already validated, and if not valid, the empty string is returned, even though the input still shows the characters.
当你首先输入一串数字，然后输入一个字母，整个输入就会被清除。这是因为在Firefox中，您从输入获得的值已经被验证，如果无效，则返回空字符串，即使输入仍然显示字符。
The thing really is that you should choose whether you leave it to the browser or to your code to validate in the input. In the latter case, just remove the type="number".
真正的问题是，您应该选择是让浏览器来验证，还是让代码来验证输入。在后一种情况下，只需删除type="number"。
#1
1
Looks like a bug in Firefox. It's easy to confirm that it's not about regex: in fact, any reassignment in keyup handler seems to break it up, effectively disallowing floats. For example (done with vanilla DOM API to prevent potential side-effects; it's the same with jQuery, of course):
看起来像Firefox中的一个bug。很容易确定这不是关于regex的:事实上，keyup处理程序中的任何重新分配似乎都将其分解，从而有效地禁止浮动。例如(使用香草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" />Note that there's a subtle difference in keyup phase for numeric and non-numeric characters. For example, if there's already 4 entered in the control, and you press 2, the logged value will be 42. However, it still be 4 if you press . instead. Chrome and IE seem to disregard this difference, Firefox is a bit more straightforward.
注意，数字字符和非数字字符在关键字阶段有细微的区别。例如，如果控件中已经输入了4，按2，日志值将为42。然而，如果你按下它还是4。代替。Chrome和IE似乎忽视了这一点，Firefox更直接一些。
Fortunately, it's quite easy to find a workaround for the bug - just listen for input event instead (MDN docs). Not only it's guaranteed to fire after the value is changed, it also handles such things as mouse-triggered copy-paste.
幸运的是，很容易找到这个bug的解决方案——只需侦听输入事件(MDN文档)。它不仅保证在值更改后触发，还处理鼠标触发的复制粘贴。
#2
1
There are differences in implementation of the <input type="number"> element in different browsers, but when you use it, you should leave it to that element to perform the validation. And it does that by showing a red border (implementation dependent) instead of taking out invalid characters, because most believe that the latter solution is not user-friendly -- you don't want them to think their keyboard is broke.
在不同的浏览器中，元素的实现存在差异，但是当您使用它时，应该将执行验证的任务留给该元素。它通过显示红色边框(依赖于实现)而不是删除无效字符来实现这一点，因为大多数人认为后一种解决方案不友好——您不希望他们认为他们的键盘坏了。
There are the following issues playing in your case:
在你的案例中有以下问题:
-
When you type a point after a series of digits, that is considered valid by your code, but by assigning it back to the input, it is interpreted as a number, and so the final point is removed from it.
当您在一串数字后面输入一个点时，您的代码认为它是有效的，但是通过将它重新分配给输入，它将被解释为一个数字，因此最后一点将从它中删除。
-
When you first type a series of digits and then a letter the whole input gets cleared. This is because in Firefox the value you get from the input is already validated, and if not valid, the empty string is returned, even though the input still shows the characters.
当你首先输入一串数字，然后输入一个字母，整个输入就会被清除。这是因为在Firefox中，您从输入获得的值已经被验证，如果无效，则返回空字符串，即使输入仍然显示字符。
The thing really is that you should choose whether you leave it to the browser or to your code to validate in the input. In the latter case, just remove the type="number".
真正的问题是，您应该选择是让浏览器来验证，还是让代码来验证输入。在后一种情况下，只需删除type="number"。