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"> )，您要求浏览器为您做一些工作。另一方面，如果您希望能够捕获非数字输入并对其进行处理，则必须依赖久经考验的旧文本输入字段并自行解析内容。

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.