如何获取原始值 <input type="number">场地? [英] How to get the raw value an <input type="number"> field?

问题描述

如何获取 字段的 真实" 值?

<小时>

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

Chrome 29 主要支持此功能:

我现在需要的是能够读取用户在输入框中输入的 原始" 值.如果用户输入了一个数字:

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

但如果用户输入无效文本，我想将输入框涂成红色:

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

edQuantity.value = "" (String);

(至少在 Chrome 29 中)

如何获取 控件的 原始" 值?

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

我没有看到任何与实际输入相似的内容.

我也找不到一种方法来判断盒子是否为空".也许我可以推断:

value isEmpty 结论==========================================4"假有效数"" 真正的空箱；不是问题"" 错误的无效文本；把它涂成红色

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

如何获取 控件的 原始" 值?

红利阅读

• 以上所有的jsFiddle(更新)
• Quirkmode.org 新输入类型条目

解决方案

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

<块引用>

值清理算法如下:如果value元素不是 有效浮点数，然后将其设置为空字符串代替.

通过指定类型 (<input type="number">)，您是在要求浏览器为您做一些工作.另一方面，如果您希望能够捕获非数字输入并对其进行处理，则必须依靠旧的、经过验证的真实文本输入字段并自己解析内容.

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

<块引用>

用户代理不得允许用户将值设置为非空不是有效浮点数的字符串.

How can i get the "real" value of an <input type="number"> field?

---

I have an input box, and i'm using newer HTML5 input type number:

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

This is mostly supported in Chrome 29:

What i now need is the ability to read the "raw" value the user has entered in the input box. If the user has entered a number:

then edQuantity.value = 4, and all is well.

But if the user enters invalid text, i want to color the input-box red:

Unfortunately, for a type="number" input box, if the value in the text-box is not a number then value returns an empty string:

edQuantity.value = "" (String);

(in Chrome 29 at least)

How can i get the "raw" value of an <input type="number"> control?

i tried looking through Chrome's list of other properties of the input box:

i didn't see anything that resembles the actual input.

Nor could i find a way to tell if the box "is empty", or not. Maybe i could have inferred:

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

Note: You can ignore everything after the horizontal rule; it's just filler to justify the question. Also: don't confuse the example with the question. People might want the answer to this question for reasons other than coloring the box red (One example: converting the text "four" into the latin "4" symbol during the onBlur event)

How can i get the "raw" value of an <input type="number"> control?

Bonus Reading

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

解决方案

According to the WHATWG, you shouldn't be able to get the value unless it's valid numeric input. The input number field's sanitization algorithm says the browser is supposed to set the value to an empty string if the input isn't a valid floating point number.

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.

By specifying the type (<input type="number">) you're asking the browser to do some work for you. If, on the other hand, you'd like to be able to capture the non-numeric input and do something with it, you'd have to rely on the old tried and true text input field and parse the content yourself.

The W3 also has the same specs and adds:

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

这篇关于如何获取原始值 &lt;input type="number"&gt;场地?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！