如何获取原始值<输入类型=“数字”>字段？奖励阅读奖金

javascript html validation input

2022-08-30 04:43:53

如何获取字段的“实际”值？<input type="number">

我有一个框，我使用的是较新的HTML5输入类型：inputnumber

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

Chrome 29 主要支持此功能：

enter image description here

我现在需要的是能够读取用户在输入框中输入的“原始”值。如果用户输入了一个数字：

enter image description here

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

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

enter image description here

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

edQuantity.value = "" (String);

（至少在Chrome 29中）

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

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

enter image description here

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

我也找不到一种方法来判断盒子是否“是空的”。也许我可以推断：

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

奖励阅读

js上述所有内容的小提琴（已更新）
新输入类型的 Quirkmode.org 条目

答案 1

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

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

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

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

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

答案 2

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

edQuantity.validity.valid

对象的有效性状态提供有关用户输入内容的线索。考虑具有 a 和 set 的输入type="number"minmax

<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

在此处阅读有关：无效的更多信息。