如何获得 <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">
的“原始” 值控制?
红利阅读
最佳答案
根据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.
关于javascript - 如何获取 <input type ="number"> 字段的原始值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18852244/