如何获得字段的“实际”价值<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">？

奖励阅读

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

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

的值消毒算法如下：如果该值的元素的是不是一个有效的浮点数，然后将其设置为空字符串来代替。

通过指定类型（<input type="number">），您可以要求浏览器为您完成一些工作。另一方面，如果您希望能够捕获非数字输入并对其进行处理，则必须依靠旧的尝试过的真实文本输入字段并自己解析内容。

在W3还具有相同的规格，并增加了：

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

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

edQuantity.validity.valid

该ValidityState对象给出关于用户输入的内容线索。考虑一个type="number"带有输入min和max一组

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

我们一直想使用.validity.valid。

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

User's 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

您必须先确保浏览器支持HTML5验证，然后才能使用它：

function ValidateElementAsNumber(element)
{
   //Public Domain: no attribution required.
   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 :invalid选择器即可。

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

每当输入非数字有效值时，这将触发您的元素变为红色。

浏览器对的支持与<input type='number'>几乎相同 :invalid，因此没有问题。

:invalid 在此处了解更多信息。

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

根据按键代码跟踪所有按键

我想一个人可以听键盘输入事件，并根据其键控代码保留输入的所有字符的数组。但这是一个非常乏味的任务，并且可能易于出现错误。

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

选择输入并以字符串形式获取选择

document.querySelector('input').addEventListener('input', onInput);

function onInput(){
  this.select(); 
  console.log( window.getSelection().toString() )
}

<input type='number'>

全部归功于：int32_t