当 <input type="number"> 包含非数字字符时，用 JS 获取它的值答案

【问题标题】：Get value of <input type="number"> with JS when it contains non-numeric characters当 <input type="number"> 包含非数字字符时，用 JS 获取它的值
【发布时间】：2013-03-15 16:10:47
【问题描述】：

This jsfiddle demonstrates the following issue.

最简单的例子是：

<input id="number" type="number" value="1">
console.log(document.getElementById('number').value);

这会按预期记录 1。但是：

<input id="number" type="number" value="1A">
console.log(document.getElementById('number').value);

只记录一个空字符串''，因为值中的非数字字符。某些设备+浏览器（例如 Chrome）允许您在这些输入中输入非数字字符。

这很烦人，因为我想要支持它的设备（例如 iPhone、iPad 数字键盘）的 type="number" 输入。但是我想使用 javascript 来阻止输入脏输入 - 这需要获取 keyup 上的值 - 然后正则表达式替换非数字字符。

看起来 jQuery 的 .val() 方法给出了相同的结果。

【问题讨论】：

不要阻止用户输入，这很烦人。检查 keyup 上的值，如果该值无效，则显示一条不显眼的消息，让用户知道该值无效并让他们自己修复。您只关心发送到服务器时它是一个有效值，同时该值可以是任何值。哦，Firefox 会显示输入的值。
如果你想要那个输入方法，让输入字段在 iOS 设备上只有 type=number
为什么需要这个值？您可以从键盘事件中知道将插入什么。
@int32_t - 谢谢，我不敢相信我没想到！

标签： javascript html textinput

【解决方案1】：

这就是我要找的东西：

$('input[type=number]').keypress(function(e) {
  if (!String.fromCharCode(e.keyCode).match(/[0-9\.]/)) {
    return false;
  }
});

我知道阻止用户输入可能很烦人，但这仍然允许无效输入，例如 1.2.3

但是在这种情况下，这正是我所需要的。希望它对其他人有用。感谢@int32_t 的建议。

【讨论】：

【解决方案2】：

您不应该将<input type=number> 用于不是数字的东西（在数学意义上，它也不适用于电话号码或邮政编码），并且清除该值是故意的。

您可以测试设备是否支持type=number 并仅在不支持时附加您的后备：

var input = document.createElement('input');
input.setAttribute('type','number');
if (input.type != 'number') { // JS property won't reflect DOM attribute
   polyfill_number();
}

或者（特别是如果您的号码是邮政编码、序列号等），您可以使用：

<input type=text pattern="[0-9]*">

这也会改变键盘。

【讨论】：

不会在 Andorid 设备上启用数字键盘。