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

IT技术 javascript html validation input
2021-01-24 11:18:15

如何获得字段“真实”<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">

奖励阅读

4个回答

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

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

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

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

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

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

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

edQuantity.validity.valid

ValidityState对象给出关于用户输入的内容线索。考虑type="number"带有 aminmaxset输入

<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 删除了一个有用的答案:

只需:invalid为此使用 CSS选择器。

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

每当输入非数字有效值时,这将触发您的元素变为红色。

浏览器对 的支持与<input type='number'>大致相同 :invalid,所以没问题。

:invalid 在这里阅读更多信息

确实如此,但是数字输入何时无效它就像输入是空的一样。AtypeMismatch可能有意义,但这仅适用于电子邮件或 url 类型......
2021-03-14 11:18:15
@Bergi 上表给出了数字输入可能无效的示例:“q”、“11”(最大值为 10)、“0”(最小值为 1 时)、“”(元素为required
2021-03-23 11:18:15
@Bergi.badInput于 11/20/2012 添加但是没有人应该badInput查看输入是否有效;他们应该看看.valid有可能(并且正确)为.badInput假,并且仍然有无效输入。.valid定义为不存在任何验证错误(例如不匹配、上溢、下溢),其中.badInput只是一种错误。请注意上面的图表 where.badInput为 false,但输入仍然无效。
2021-03-25 11:18:15
在 Opera 中不起作用。即使您输入字符串,它也表示有效
2021-03-29 11:18:15
Opera 支持该.validity属性,但无法正确处理.valid?!
2021-04-06 11:18:15
input.focus();
document.execCommand("SelectAll");
var displayValue = window.getSelection().toString();
在 firefox 中不起作用: bugzilla.mozilla.org/show_bug.cgi?id=85686 (请注意,这个错误是在 2001 年提交的!!)
2021-03-29 11:18:15
Firefox 一如既往地正确。这不应该工作并且是一个错误
2021-04-02 11:18:15

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

我想人们可以监听 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

使用现场演示进行编辑,显示此方法有多糟糕
2021-03-13 11:18:15
限制:文本是视觉上选择的。如果用户输入内容,内容将消失
2021-03-19 11:18:15
该解决方案已在其他地方尝试过,但不起作用特别是当用户按下Delete, Backspace, Ctrl+X, Ctrl+V, Right-click-cut, 时Right-click-paste
2021-03-25 11:18:15
令人惊讶的是,选择的事情似乎奏效了。该方法的局限性是什么?
2021-04-04 11:18:15
我同意你的看法,基本上 OP 的要求是不可能的。然而,我提到的两个黑客(它们都是黑客,我不否认)在某种程度上确实有效。在某些情况下,也许它们对某人有用?
2021-04-10 11:18:15