javascript - 如何只允许在输入[类型 ="number"] 字段中输入数字？

Question

我有一个输入字段，用户只能在其中输入数字 [0-9]。

document.getElementById("integer").addEventListener('input', restrictToInteger);
function restrictToInteger() {
    this.value = this.value.replace(/[^\d]/g, '');
}

<input type="number" id="integer" />

jsFiddle Demo

问题是这样的:当我输入一个数字(例如 1234)然后按点(.)时，+ 或 - 输入字段的内容是由浏览器自动删除(值设置为“”=空字符串)。但为什么？将类型从 number 更改为 text 似乎可以解决问题。但是后来我失去了输入字段的向上/向下箭头功能。有什么想法吗？

Answer 1

HTML 4 有一个名为onkeypress 的事件。使用该属性，我们可以在不使用额外 JS 的情况下执行此操作:

<input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57">

此处从 0 到 9 的数字允许使用 event.charCode 从 48 到 57。