如何获得<inputtype=“number”>字段的原始值？

Question

如何获得<inputtype=“number”>字段的原始值？

我怎么才能拿到“真实”a值<input type="number">田野？

---

我有一个input框，我使用的是更新的HTML 5输入类型number:

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

Chrome 29主要支持这一点：

我现在需要的是阅读“生”值，则为用户在输入框中输入的值。如果用户输入了一个数字：

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

但是，如果用户输入无效文本，我希望将输入框涂上红色：

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

edQuantity.value = "" (String);

(至少在Chrome 29中)

我怎么才能拿到“生”a值<input type="number">控制室？

我试着查看Chrome输入框的其他属性列表：

我没有看到任何与实际输入类似的东西。

我也想不出这个盒子“空”或者不是。也许我可以推断：

value          isEmpty        Conclusion

=============  =============  ================

"4"            false          valid number

""             true           empty box; not a problem

""             false          invalid text; color it red

注：在水平规则之后，你可以忽略所有的事情；这只是证明问题合理的补充。还有：不要把例子和问题混淆起来。人们可能出于某些原因想得到这个问题的答案。其他而不是将方框涂成红色(例如：转换文本)"four"进入拉丁语"4"在onBlur事件期间的符号)

我怎么才能拿到“生”a值<input type="number">控制室？

奖金阅读

• jsFiddle以上所有内容

  (更新)

• 新输入类型的Quirkmode.org条目

Answer 1

它没有回答问题，但有用的解决办法是检查edQuantity.validity.valid这个ValidityState对象提供用户输入内容的线索。考虑type="number"输入min和max集<input&nbsp;type="number"&nbsp;min="1"&nbsp;max="10">我们总想用.validity.valid.其他财产只提供奖金信息：User's&nbsp;Input&nbsp;&nbsp;.value&nbsp;&nbsp;.valid&nbsp;|&nbsp;.badInput&nbsp;&nbsp;.rangeUnderflow&nbsp;&nbsp;.rangeOverflow ============&nbsp;&nbsp;======&nbsp;&nbsp;======&nbsp;|&nbsp;=========&nbsp;&nbsp;===============&nbsp;&nbsp;============== ""&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;""&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true&nbsp;&nbsp;&nbsp;|&nbsp;false&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;;valid&nbsp;because&nbsp;field&nbsp;not&nbsp;marked&nbsp;required "1"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"1"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true&nbsp;&nbsp;&nbsp;|&nbsp;false&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp; "10"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"10"&nbsp;&nbsp;&nbsp;&nbsp;true&nbsp;&nbsp;&nbsp;|&nbsp;false&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false "0"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"0"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;|&nbsp;false&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;;invalid&nbsp;because&nbsp;below&nbsp;min "11"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"11"&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;|&nbsp;false&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true&nbsp;&nbsp;&nbsp;;invalid&nbsp;because&nbsp;above&nbsp;max "q"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;""&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;|&nbsp;true&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;;invalid&nbsp;because&nbsp;not&nbsp;number "³"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;""&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;|&nbsp;true&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;;superscript&nbsp;digit&nbsp;3 "٣"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;""&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;|&nbsp;true&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;;arabic&nbsp;digit&nbsp;3 "₃"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;""&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;|&nbsp;true&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false&nbsp;&nbsp;;subscript&nbsp;digit&nbsp;3在使用之前，您必须确保浏览器支持HTML 5验证：function&nbsp;ValidateElementAsNumber(element){ &nbsp;&nbsp;&nbsp;//Public&nbsp;Domain:&nbsp;no&nbsp;attribution&nbsp;required. &nbsp;&nbsp;&nbsp;if&nbsp;((element.validity)&nbsp;&&&nbsp;(!element.validity.valid)) &nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//if&nbsp;html5&nbsp;validation&nbsp;says&nbsp;it's&nbsp;bad:&nbsp;it's&nbsp;bad &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;//Fallback&nbsp;to&nbsp;browsers&nbsp;that&nbsp;don't&nbsp;yet&nbsp;support&nbsp;html5&nbsp;input&nbsp;validation &nbsp;&nbsp;&nbsp;//Or&nbsp;we&nbsp;maybe&nbsp;want&nbsp;to&nbsp;perform&nbsp;additional&nbsp;validations &nbsp;&nbsp;&nbsp;var&nbsp;value&nbsp;=&nbsp;StrToInt(element.value); &nbsp;&nbsp;&nbsp;if&nbsp;(value&nbsp;!=&nbsp;null) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;true; &nbsp;&nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false;}奖金他删除了一个有用的答案：只需使用CSS:invalid这个选择器。input[type=number]:invalid&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#FFCCCC;}这将触发您的元素在输入非数字有效时变为红色。浏览器支持<input type='number'>与:invalid所以没问题。阅读更多关于:invalid这里.

Answer 2

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