如何将原始值设为<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">？

我试着浏览Chrome的输入框的其他属性列表:

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

我也找不到方法来判断盒子是否"空".也许我可以推断:

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

注意:您可以忽略水平规则后的所有内容; 它只是填充物来证明这个问题.另外:不要将示例与问题混淆.人们可能要回答这个问题的原因其他比着色盒红(一个例子:转换文本"four"成拉丁"4"onblur事件中的符号)

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

奖金阅读

• 所有上述的jsFiddle(更新)
• Quirkmode.org新输入类型的条目

Answer 1

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

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

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

在W3还具有相同的规格,并增加了:

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

Answer 2

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

edQuantity.validity.valid

该ValidityState对象给出关于用户输入的内容线索.考虑type="number"带有a min和maxset 的输入

<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();