如何只允许数字输入到输入[type ="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演示

问题是这样的:当我输入一个数字(例如.1234)然后按下dot(.),+或 - 时,浏览器会自动删除输入字段的内容(值设置为""=空字符串).但为什么？从变更类型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。