javascript - 如何获得原始值场地？

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">？

我尝试浏览 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 条目

Answer 1

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

值清理算法如下：如果元素的值不是有效的浮点数，则将其设置为空字符串。

通过指定类型 ( <input type="number">)，您要求浏览器为您做一些工作。另一方面，如果您希望能够捕获非数字输入并对其进行处理，您将不得不依靠旧的、经过验证的文本输入字段并自己解析内容。

W3也具有相同的规格并增加了：

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

Answer 2

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

edQuantity.validity.valid

对象的ValidityState提供有关用户输入内容的线索。考虑type="number"带有 amin和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 这里。

Answer 3

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

Answer 4

根据键码跟踪所有按下的键

我想人们可以监听 keyup 事件并根据它们的键码保留输入的所有字符的数组。但这是一项相当乏味的任务，并且可能容易出现错误。

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