Javascript 如何获取原始值<；输入类型="；“数字”&燃气轮机；领域

如何获取

字段的“真实”值

---

我有一个

输入

框，我正在使用更新的HTML5输入类型

数字

：

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

（至少在铬29中）

如何获取

控件的“原始”值

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

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

我也找不到办法来判断这个盒子是不是“空的”。也许我可以推断：

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

注意：您可以忽略水平规则之后的所有内容；这只是为了证明这个问题的正确性。另外：不要将示例与问题混淆。除了将方框染成红色之外，人们可能还想知道这个问题的答案（例如：在onBlur事件期间将文本

“four”

转换为拉丁语

“4”

符号）

如何获取

控件的“原始”值

额外阅读

• （更新）

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

如下所示：如果 元素不是，然后将其设置为空 而不是字符串

通过指定类型（

），您要求浏览器为您做一些工作。另一方面，如果您希望能够捕获非数字输入并对其进行处理，则必须依赖旧的、经过验证的文本输入字段并自己解析内容

还具有相同的规格和添加：

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

---

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

edQuantity.validity.valid

对象的属性提供了有关用户输入内容的线索。考虑<代码>类型=“数字”<代码>输入，使用<代码> min <代码>和<代码> max SET

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

在使用之前，您必须确保浏览器支持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;
}

奖金 Spudy有一个有用的答案，他删除了：

只需使用CSS

：无效的

选择器即可

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

这将触发您的元素在出现非数字字符时变为红色 输入有效值

对

的浏览器支持与

：无效

，因此没有问题

---

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

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

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

document.querySelector（'input'）。addEventListener（'input'，onInput）；
函数onInput（）{
这是select（）；
console.log（window.getSelection（）.toString（））
}

---

数字输入字段的“实”值必须是数字。如果您希望允许输入数值以外的其他值，则

number

不是您要查找的输入类型；使用普通的

文本

输入。@robertc Chrome是允许输入数字以外的内容的代理；我只需要知道他们输入了数字以外的内容。检查字段-我希望

类型不匹配

，但我没有检查自己。@int32\u没有向下阅读第六行（即“但是如果用户输入…”）我的用例。。。我有两个数字字段：纬度和经度。我想检测是否有人粘贴了“lat，lon”并进行了适当的处理。对于type=“number”，这目前是不可能的。因为“lat，lon”无效。。无法获取“原始”值来对其执行正则表达式。另一个用例：显示客户错误：“

blah

是无效数字”。在Opera中不起作用。即使您输入了字符串.Opera也支持

.validity

属性，但不能正确处理

.valid

？！是的，但是什么时候输入一个数字？它就像输入是空的一样。

typeMismatch

可能有意义，但这仅适用于电子邮件或url类型…@Bergi上表给出了数字输入可能无效的示例：“q”、“11”（最大值为10）、“0”（最小值为1）、“”（然后元素是

必需的

）@Bergi。但任何人都不应该查看

badInput

，看输入是否有效；他们应该查看

.valid

。

.badInput

可能（且正确）为false，但仍然存在无效输入

.valid

定义为不存在任何验证错误（例如不匹配、溢出、下溢），其中

.badInput

只是一种错误。请注意上面的图表，其中

.badInput

为false，但输入仍然无效。如果用户代理不允许用户将值设置为无效浮点数的非空字符串，这将非常有用。但如果TWG说这是不可能的；那就是答案。下面添加了我当前需要的解决方法。通过指定类型（

），您要求浏览器为您做一些工作。就我个人而言，我只是要求手机浏览器显示一个数字键盘，结果得到了一个令人不快的额外验证。大多数问题都源于这样一个事实，即

type

属性决定了验证规则和显示何种输入机制的规则，但很有可能希望向移动用户显示数字键盘，而不希望将数字验证应用于桌面用户。HTML5.1至少最终会通过

inputmode

属性解决这个问题。但是当浏览器做得不够时，我希望能够完成它。例如删除输入中的空格，推断小数点

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;
}

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

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