为什么 event.target.value 不包含“。”和“e”用于数字输入？答案

【问题标题】：Why doesn't event.target.value include "." and "e" for number inputs?为什么 event.target.value 不包含“。”和“e”用于数字输入？
【发布时间】：2018-08-24 11:48:52
【问题描述】：

我正在使用 Preact：

<input type="number" onKeyup={event => console.log(event.target.value)} />

如果我输入句点或“e”，它不会作为event.target.value 的一部分出现，直到我在其后输入另一个数字。

例如

如果输入值为123，则记录123。

如果输入值为123.，则记录123。

如果输入值为123..，则记录123。

如果输入值为123.4，则记录123.4。

为什么会这样？有没有办法获取实际输入（不删除type="number"）？

【问题讨论】：

输入类型号只是简单的解析123.作为整数123。为什么需要句号？
因为输入类型是数字，而123.或123..不是有效数字
不确定人们对此有何看法，但是...我个人非常不喜欢数字输入！当你想要控制它们时，它们总是让人头疼。我的建议是使用“普通”输入并添加一个只允许数字（和小数，如果你想要的话）的正则表达式。
@Chris 我同意，我想我会改用text 输入，否则我需要很多number 特定的逻辑。

标签： javascript html reactjs preact

【解决方案1】：

number 输入可以保存整数和浮点数。

由于123.是整数，所以输入会返回整数123

另外，123.4 是一个有效的浮点数，因此输入的值为 123.4

没有办法从数字输入类型返回诸如123.4 之类的字符串，因为它不适合用于此目的。

【讨论】：

不管 JS 有什么神奇的自动格式化功能，都应该有一种方法可以获取输入的确切输入。
根据 W3：“用户代理不得允许用户将值设置为不是有效浮点数的非空字符串”。所以没有没有:) 更多信息：w3.org/TR/2011/WD-html5-20110525/number-state.html#number-state

【解决方案2】：

关键是 e 是一个表达式 e² 和 e2 一样，e 后面没有任何数字，它是不完整的，数字不会改变，所以“e”不会被保存。

与此相同。末尾带有点的数字是数字本身，因此不会被保存。

您必须将其更改为文本，否则您在此行最后的“e”不会保存。

【讨论】：

【解决方案3】：

您可以将默认值存储在一个变量中，并在每个 keyup 事件之后更新该变量。

示例 HTML

<input type="number" onKeyup={event => this.eachKeyPress(event)} />

let output = "";
function eachKeyPress(event){
  output += event.key;
  console.log("value : ",output );   
}

【讨论】：