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

Question

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)

Answer 1

我相信这是因为您的系统语言设置。如果您所在国家/地区有 十进制逗号，您应该使用逗号而不是点。

您可以为输入设置

step="0.1"

属性，并亲自查看系统/浏览器中正确的小数点符号是什么。另请参阅有关 输入类型数字本地化的主题。

Answer 2

防止

.

打字的可能解决方法：

$input.addEventListener('keydown', (e) => {
    if(e.key === "."){
        e.preventDefault();
    }
});