如何获得一个<input type =“number”>字段的原始值？

我怎样才能得到一个<input type="number">字段的“真实”值？

---

我有一个input框，我使用了更新的HTML5inputtypesnumber ：

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

Chrome 29主要支持这个function：

我现在需要的是能够读取用户在input框中input的“原始”值。 如果用户input了一个数字：

那么edQuantity.value = 4 ，一切都很好。

但是，如果用户input无效的文本，我想为红色的input框着色：

不幸的是，对于type="number"input框，如果文本框中的值不是数字，那么value将返回一个空string：

 edQuantity.value = "" (String); 

（至less在Chrome 29中）

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

我试图通过铬的input框的其他属性的列表：

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

我也不能find一个方法来判断这个盒子是否是空的 。 也许我可以推断：

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

注意 ：您可以忽略横向规则后的所有内容; 这只是填料来certificate这个问题。 另外：不要把这个例子与问题混淆起来。 人们可能会想要这个问题的答案，除了为红框着色之外的其他原因（例如：在onBlur事件中将文本"four"转换为拉丁文"4"符号）

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

奖金阅读

• 上述所有jsFiddle （更新）
• 用于新inputtypes的Quirkmode.org条目

Answer 1

根据WHATWG ，除非有效的数字input，否则你不应该能够得到这个值。 input数字字段的清理algorithm说，如果input不是有效的浮点数，浏览器应该将该值设置为空string。

值清理algorithm如下：如果元素的值不是有效的浮点数 ，则将其设置为空string。

通过指定types（ <input type="number"> ），您要求浏览器为您做一些工作。 另一方面，如果您希望能够捕获非数字input并对其进行处理，则必须依靠旧的可靠的文本input字段并自行parsing内容。

W3也有相同的规格，并补充说：

用户代理不得允许用户将该值设置为不是有效浮点数的非空string。

Answer 2

它不回答这个问题，但有用的解决方法是检查

 edQuantity.validity.valid 

一个对象的ValidityState给出了关于用户input内容的线索。 考虑一个type="number"input与min和max设置

 <input type="number" min="1" max="10"> 

我们总是希望使用.validity.valid 。

其他属性只提供奖金信息：

 Users Input .value .valid | .badInput .rangeUnderflow .rangeOverflow ============ ====== ====== | ========= =============== ============== "" "" true | false false false ;valid because field not marked required "1" "1" true | false false false "10" "10" true | false false false "0" "0" false | false true false ;invalid because below min "11" "11" false | false false true ;invalid because above max "q" "" false | true false false ;invalid because not number "³" "" false | true false false ;superscript digit 3 "٣" "" false | true false false ;arabic digit 3 "₃" "" false | true false false ;subscript digit 3 

在使用之前，您必须确保浏览器支持HTML5validation：

 function ValidateElementAsNumber(element) { if ((element.validity) && (!element.validity.valid)) { //if html5 validation says it's bad: it's bad return false; } //Fallback to browsers that don't yet support html5 input validation //Or we maybe want to perform additional validations var value = StrToInt(element.value); if (value != null) return true; else return false; } 

奖金

Spudly有一个有用的答案，他删除了：

只需使用CSS :invalidselect器。

 input[type=number]:invalid { background-color: #FFCCCC; } 

这将触发你的元素在input非数字有效时变成红色。

浏览器对<input type='number'>的支持与“ :invalid ”大致相同，所以没有问题。

详细了解:invalid此处:invalid 。

注意 ：任何代码都被释放到公共领域。 不需要归属

Answer 3

 input.focus(); document.execCommand("SelectAll"); var displayValue = window.getSelection().toString(); 

Answer 4

跟踪所有按键的基础上，他们的关键代码

我想可以听密码事件，并根据他们的密码保持input的所有字符数组。 但这是一个非常繁琐的任务，可能容易出错。

http://unixpapa.com/js/key.html

selectinput并以stringforms获得select

 input.select(); var value = window.getSelection().toString(); 

所有功劳归于 ： int32_t