Question

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）允许您在这些输入中输入非数字字符。

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

看来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]*">

这也将改变键盘。

当JS包含非数字字符时，使用JS获取<input type =“number”/>的值

2 个答案: