如何将原始值设为<input type =“number”/>字段？

Question

如何获取<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">控件的“raw”值？

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

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

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

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

注意：您可以忽略水平规则后的所有内容;它只是填充物来证明这个问题。另外：不要将示例与问题混淆。人们可能想要这个问题的答案是出于其他的原因，而不是将框红色着色（一个例子：在onBlur事件期间将文本"four"转换为拉丁语"4"符号）< / p>

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

奖金阅读

• jsFiddle of all of the above（已更新）
• Quirkmode.org entry for the new input types

Answer 1

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

  

value sanitization algorithm如下：如果是value   element不是valid floating-point number，然后将其设置为空   而不是字符串。

通过指定类型（<input type="number">），您要求浏览器为您完成一些工作。另一方面，如果您希望能够捕获非数字输入并对其执行某些操作，则必须依赖旧的经过验证的文本输入字段并自行解析内容。

W3也有相同的规格并添加：

  

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

Answer 2

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

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，所以没问题。

     

Read more about :invalid here

Answer 3

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

Answer 4

根据键代码跟踪所有按键

我想人们可以听取键盘事件并根据键码保留所有输入字符的数组。但这是一项相当繁琐的任务，可能容易出错。

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