javascript - 获取价值当 JS 包含非数字字符时

Question

这个 jsfiddle 演示了以下问题。

最简单的例子是：

<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() 方法给出了相同的结果。

Answer 1

这就是我一直在寻找的：

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

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

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

Answer 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]*">

这也会改变键盘。