输入点后，event.target.value 在 input[type=number] 中变为空字符串答案

【问题标题】：event.target.value becomes empty string in input[type=number] upon entering a dot输入点后，event.target.value 在 input[type=number] 中变为空字符串
【发布时间】：2021-02-03 02:18:02
【问题描述】：

https://jsfiddle.net/ElMeroMero/2e4jmro3/7/

我在 input[type=number] 上有一个 onChange 处理程序，由于输入字段的奇怪行为而导致问题：在小数点前输入点后，值变为空字符串。

这是为什么呢？

更新：

这似乎是一个 chrome 问题。我在以下浏览器中进行了测试，没有出现上述行为：

MacOS、Firefox 83.0（64 位）
MacOS，Safari 版本 14.0.1（15610.2.11.51.10、15610）

我的 Chrome 版本 (MacOS)：86.0.4240.183（官方版本）(x86_64)

【问题讨论】：

你用的是什么浏览器？在 Chrome 86 上这对我来说不是问题
Chrome 版本 86.0.4240.183 (Official Build) (x86_64) 但我刚刚在 safari 上对其进行了测试，并且确实有效。会不会是 Chrome 的错误？
可能是这样。我在 86.0.4240.193，但我怀疑这么小的版本更改会有所作为。
附注：根据定义，输入类型 number 在 Number 上验证，而不是在 parseFloat 上验证。
我的 Chrome 87.0.4280.66 上的行为相同。

标签： javascript html google-chrome

【解决方案1】：

我相信这是因为您的系统语言设置。如果decimal comma 在您的国家/地区是一个东西，您应该使用逗号而不是点。

您可以将step="0.1" 属性设置为输入，并亲自查看系统/浏览器中正确的十进制符号是什么。另请参阅有关input type number localization 的主题。

【讨论】：

step 没有为我修复它。
我的系统设置是德语。但是step="0.1" 并不能解决问题，但是输入“21”（用逗号代替点）确实有效，因此这可能确实与系统语言设置有关。然而，这并不能“证明”这种行为，因为输入将“21.5”作为值，所以为什么不采用“21”。作为价值？
step="0.1" 不应该解决这个问题。这只是一个建议，看看您的系统/浏览器设置中哪个是正确的小数分隔符。如果你的键盘上有小键盘，你可以在零和辅助输入之间按 [del] 键。我想这仅仅是因为它在语法上不正确。当您在之后键入一些小数时，出于可用性原因，显然会发生一些解析。如果没有小数，点被认为是数字中的无效字符。如果您想要“修复”，只需使用指定模式的输入类型文本。
但是 input[type=number] 的“规则”是当您输入无效的内容时，它根本不会显示。但是这里显示了点，但是 event.target.value 被清空了。这就是为什么这似乎是一个 chrome 错误。
我的 Win 10 上的 Firefox 和 Edge 的行为方式相同，仅供参考。我真的不认为这是一个错误。点更可能是允许的，因为某些地区既有小数点又有逗号，对于许多用户来说，不允许它只是一个复杂的问题。