Chrome/Chromium 当最后一个字符为点时,输入数值为空

Chrome/Chromium input number value empty when last char is dot

在 Chrome(或其他 Chromium 浏览器)中,当我尝试获取数字输入字段的值时,当最后一个字符是点 (.) 时,该值为空。

这是我能想到的最简单的例子:

<input type="number" oninput="console.log(event.target.value)">

在 Chrome 中,当输入例如“123.45”时将导致此输出:

1
12
123

123.4
123.45

在 Firefox 中,我得到了更符合我预期的东西:

1
12
123
123    
123.4
123.45

如果最后一个字符是点,则获取 valueAsNumber 而不是 value 将导致 NaN,因此也没有成功。 有没有办法获取字段的实际值(或至少是不带点的值)而不是已经以某种方式解析的值?

更新:

多亏了@Kaiido,我才更清楚为什么会这样 在我的 Chrome 浏览器中 navigator.languages 设置为 ['en-US', 'en', 'nl'] 在 Firefox 中它设置为 ['en-US', 'en']

这解释了两种浏览器之间的区别(在我的例子中)以及为什么在 Chrome 中我可以使用 , 以及 .

但我仍然需要解决问题的方法。 就我而言,最重要的是我需要区分字段是空的还是无法以某种方式解析为数字的其他值。所以现在的问题更多是有没有办法获取字段中实际类型的值。

使用“step”属性使其生效并使用区域设置分隔符。

<input type="number" step="0.01" oninput="console.log(event.target.value)" />

更多信息:

<input type="number" oninput="console.log('VAL: %s|%s|%s', this.value, this.checkValidity(), this.validationMessage)" step="0.1">

输入当前语言环境中未使用的分隔符,有效性和相应的消息将指示 'this is not a number',一旦输入更多数字 - 达到精度限制 step 属性允许 - 它将再次解析为有效值。您的 GUI 应相应地指示当前有效性 - 如果您的代码要求它始终可用作有效数字,您可以保存最后一个通过验证的值,具体取决于您的用例。

还要考虑字符“e”的使用,这可能会导致临时无效值!