javascript - 如何获取 <input type ="number"> 字段的原始值？

Question

我如何获得<input type="number">的“真实”值领域？

<小时/>

我有一个input框，我正在使用较新的 HTML5 输入类型 number :

<input id="edQuantity" type="number">

Chrome 29 主要支持此功能:

我现在需要的是能够读取用户在输入框中输入的“原始”值。如果用户输入了数字:

然后edQuantity.value = 4 ，一切都很好。

但是如果用户输入无效文本，我想将输入框设置为红色:

不幸的是，对于 type="number"输入框，如果文本框中的值不是数字则 value返回一个空字符串:

edQuantity.value = "" (String);

(至少在 Chrome 29 中)

我如何获得<input type="number">的“原始”值控制？

我尝试查看 Chrome 的输入框其他属性列表:

我没有看到任何类似于实际输入的内容。

我也无法找到一种方法来判断该框是否“为空”。也许我可以推断:

value          isEmpty        Conclusion
=============  =============  ================
"4"            false          valid number
""             true           empty box; not a problem
""             false          invalid text; color it red

注意:您可以忽略水平线之后的所有内容；这只是为了证明这个问题的合理性的填充物。另外:不要将示例与问题混淆。人们可能出于其他原因想要得到这个问题的答案，而不是将框涂成红色(一个示例:在 onBlur 事件期间将文本 "four" 转换为拉丁语 "4" 符号)

我如何获得<input type="number">的“原始”值控制？

奖励阅读

• jsFiddle of all of the above (已更新)
• Quirkmode.org entry for the new input types

Answer 1

根据WHATWG ，除非它是有效的数字输入，否则您应该无法获取该值。输入数字字段的清理算法表示，如果输入不是有效的 float ，则浏览器应该将该值设置为空字符串。

The value sanitization algorithm is as follows: If the value of the element is not a valid floating-point number, then set it to the empty string instead.

通过指定类型 ( <input type="number"> )，您要求浏览器为您做一些工作。另一方面，如果您希望能够捕获非数字输入并对其执行某些操作，则必须依赖旧的经过尝试的真实文本输入字段并自行解析内容。 p>

W3也具有相同的规范并添加:

User agents must not allow the user to set the value to a non-empty string that is not a valid floating-point number.