防止在输入类型编号中输入非数字

Question

如果输入不是有效数字，则使用 <input type=number> 将导致 this.value 在事件侦听器内部返回一个空字符串。你可以在 http://jsfiddle.net/fSy53/ 看到一个例子

但是，无效字符仍会显示在输入中。

有没有办法从事件侦听器中获取实际 显示 的值，包括无效字符？

我的最终目标是防止用户在字段中实际输入任何非数字字符。我需要使用 type=number 以便移动设备使用数字虚拟键盘。我的目标是在 this.value = this.value.replace(/[^0-9.]/g, "") keyup keypress 的操作，但这不起作用，因为如果输入了无效字符，则从 this.value 读取会返回 "" 。

原文由 Explosion Pills 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您不喜欢传入的键值，请尝试阻止默认行为：

 document.querySelector("input").addEventListener("keypress", function (evt) {
    if (evt.which < 48 || evt.which > 57)
    {
        evt.preventDefault();
    }
});

原文由 Glenn Lane 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以通过防止非数字值发生 keyPress 事件来实现此目的

例如（使用 jQuery）

 $('.input-selector').on('keypress', function(e){
  return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
})

这说明了所有不同类型的输入（例如，来自数字键盘的输入具有与键盘不同的代码）以及退格键、箭头键、control/cmd + r 以重新加载等

原文由 dlangevin 发布，翻译遵循 CC BY-SA 3.0 许可协议