如何获得原始值< input type =“number”>领域？ [英] How to get the raw value an <input type="number"> field?

问题描述

如何获得< input type =number> 字段的real值？

---

我有一个输入框，我使用较新的HTML5输入类型编号：

 < input id =edQuantitytype =数> 
  

这主要在Chrome 29中支持：

我现在的样子需要的是能够读取用户在输入框中输入的 值。如果用户输入了一个号码：

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

但是，如果用户输入无效文本，我想将输入框颜色设为红色： b
$ b

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

  edQuantity.value =（String）; 
  

（至少在Chrome 29中）

如何获取< input type =number> 控件的raw值？

我试着浏览Chrome的输入框其他属性列表：

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

我也无法找到方法来判断是否为空。也许我可以推断：

  value isEmpty结论
 ============= ============= ================ 
4假有效数字
真空盒子;不是问题
假的无效文本;颜色为红色
  

注意：您可以忽略横向规则后的所有内容;它只是填充以证明问题的正当性。另外：不要将示例与问题混淆。人们可能希望这个问题的答案出于其他的原因，而不是为方框着色（例如：将文本four转换为拉丁文4符号）

如何获取raw > < input type =number> 控制？

奖金读数

• 以上所有内容的jsFiddle （已更新）


• 用于新输入类型的Quirkmode.org条目
li>

解决方案

根据 WHWWG ，你不应该除非它是有效的数字输入，否则能够获得该值。输入数字字段的消毒算法说，如果输入不是有效的浮点数，浏览器应该将该值设置为空字符串。

价值净化算法如下：如果元素的-fe-value =noreferrer> 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.

这篇关于如何获得原始值< input type =“number”>领域？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！