如何获取 <input type="number"> 字段的原始值?

Posted

技术标签:

【中文标题】如何获取 <input type="number"> 字段的原始值?【英文标题】:How to get the raw value an <input type="number"> field? 【发布时间】:2013-09-22 00:47:32 【问题描述】:

如何获得&lt;input type="number"&gt; 字段的“真实” 值?


我有一个input 框,我正在使用更新的 html5 输入类型number

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

Chrome 29 主要支持此功能:

我现在需要的是能够读取用户在输入框中输入的 "raw" 值。如果用户输入了一个数字:

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

但如果用户输入无效文本,我想将输入框涂成红色:

很遗憾,对于type="number" 输入框,如果文本框中的值不是数字,那么value 返回一个空字符串:

edQuantity.value = "" (String);

(至少在 Chrome 29 中)

如何获取&lt;input type="number"&gt; 控件的"raw" 值?

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

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

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

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

注意:可以忽略横线后的所有内容;这只是证明这个问题的填充物。另外:不要将示例与问题混淆。人们可能希望得到这个问题的答案其他,而不是将框涂成红色(一个例子:在 onBlur 事件期间将文本 "four" 转换为拉丁文 "4" 符号)

如何获得&lt;input type="number"&gt; 控件的"raw" 值?

阅读奖励

jsFiddle of all of the above(更新) Quirkmode.org entry for the new input types

【问题讨论】:

数字输入字段的“真实”值必须是数字。如果您想允许输入数值以外的值,那么number 不是您要查找的输入类型;使用普通的text 输入。 @robertc Chrome 是允许输入非数字的代理;我只需要知道他们输入了数字以外的东西。 检查该字段的validity state - 我希望typeMismatch 但我还没有检查自己。 @int32_t 向下阅读第六行(即“但如果用户输入...” 我的用例...我有两个数字字段:纬度和经度。我想检测是否有人粘贴“纬度,经度”并适当处理。目前,使用 type="number" 是不可能的。因为“lat, lon”是无效的.. 没有办法获得“原始”值来执行正则表达式。另一个用例:显示客户错误:“blah is an invalid number”。 【参考方案1】:

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

value sanitization algorithm 如下:如果value 的 元素不是valid floating-point number,然后将其设置为空 而是字符串。

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

W3 也具有相同的规格并添加:

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

【讨论】:

如果用户代理不允许用户将值设置为不是有效浮点数的非空字符串,这将很有用。但是,如果 whatwg 说它做不到;那么这就是答案。下面添加了我当前需要的解决方法。 通过指定类型 (&lt;input type="number"&gt;),您是在要求浏览器为您做一些工作。 就我个人而言,我只是要求移动浏览器显示一个数字键盘,并获得了令人不快的额外验证。大多数这些问题源于type 属性确定了验证规则和关于要显示什么输入机制的规则,但是很可能希望向移动用户显示数字键盘,而不希望将数字验证应用于桌面用户. HTML 5.1 至少最终会通过inputmode 属性解决这个问题。 但是当浏览器做得不够时,我希望能够完成它。比如去掉输入中的空格,推断小数点…… 另外,在各种语言中,例如法语,数字有 2 个单词。一种用于作为标识符的数字,例如信用卡号,另一种用于计数数字,例如浮点数。 @MotiKorets 不能用于输入浮点数,因为 iPhone 不会在键盘上输入小数点。不幸的是,就提供一个不错的浮点输入 UX 而言,开发人员目前非常糟糕......【参考方案2】:

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

edQuantity.validity.valid

对象的ValidityState 提供有关用户输入内容的线索。考虑带有minmax 集的type="number" 输入

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

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

&lt;input type='number'&gt; 的浏览器支持与 :invalid,所以没问题。

Read more about :invalid here.

【讨论】:

在 Opera 中不起作用。 It says valid 即使你输入了一个字符串。 Opera 支持.validity 属性,但不能正确处理.valid?! 可以,但是什么时候输入数字invalid?它就像输入为空一样。 typeMismatch 可能有意义,但这仅适用于电子邮件或 url 类型…… @Bergi 上表给出了数字输入可能无效的示例:“q”、“11”(最大值为 10)、“0”(最小值为 1)、“” (则元素为required @Bergi .badInput was added 11/20/2012。但是没有人应该查看badInput 来查看输入是否有效;他们应该看.valid.badInput 可能(并且正确)为假,并且仍然有无效输入。 .valid 定义为不存在任何验证错误(例如不匹配、上溢、下溢),其中.badInput 只是一种错误。注意上图中.badInput 为假,但输入仍然无效。【参考方案3】:
input.focus();
document.execCommand("SelectAll");
var displayValue = window.getSelection().toString();

【讨论】:

无处不在:developer.mozilla.org/en-US/docs/Web/API/Document/execCommand 在 Firefox 中不起作用:bugzilla.mozilla.org/show_bug.cgi?id=85686(请注意,此错误是在 2001 年提交的!!) Firefox 一如既往的正确。这应该不起作用,是bug【参考方案4】:

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

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

http://unixpapa.com/js/key.html

选择输入并将选择作为字符串获取

document.querySelector('input').addEventListener('input', onInput);

function onInput()
  this.select(); 
  console.log( window.getSelection().toString() )
&lt;input type='number'&gt;

全部归功于:int32_t

【讨论】:

That solution was tried elsewhere, and doesn't work。特别是当用户按下DeleteBackspaceCtrl+XCtrl+VRight-click-cutRight-click-paste时。 我同意你的观点,基本上 OP 要求的内容是不可能的。但是,我提到的两种 hack(它们都是 hack,我不否认)在某种程度上确实有效。也许在某些情况下它们对某人有用? 令人惊讶的是,选择的东西似乎有效。该方法的局限性是什么? 限制:文本是可视选择的。如果用户输入内容,内容就会消失 编辑了一个现场演示,展示了这种方法有多糟糕

以上是关于如何获取 <input type="number"> 字段的原始值?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Codeception 验收测试中为 <input type="email"> 获取 WebGuy->fillField?

js如何获取火狐以及谷歌中<input type="file"/>的本地绝对路径

<input type="file">,输入的信息怎样用jquery获取?

javascript 如何获取表单中所有文本框

jquery td元素里面的input type="checkbox" id ="a1"的元素怎么获取这个复选框?

jquery怎么获取选中的checkbox的值