如何只允许在输入[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" />

JSFIDLE演示

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

Answer 1

根据Alexandru-Ionut Mihai和natchiketa的答案，我创建了以下解决方案：

document.getElementById("integer").addEventListener("input", allowOnlyDigits);

function allowOnlyDigits() {  
  if (this.validity.valid) {
    this.setAttribute('current-value', this.value.replace(/[^\d]/g, ""));
  }
  this.value = this.getAttribute('current-value');
}

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

Answer 2

我认为浏览器清理输入值的原因是因为带两个点的字符串不是数字。

有关代码的一些更正：

若要接受带小数部分的数字，则需要更改正则表达式。现在，您只需要表示希望接受数字[0-9]而不接受更多字符。

要实现您想要的目标，您需要将/[^\d]/g更改为/[^\d.]/g。

document.getElementById("integer").addEventListener('input', restrictToInteger);

function restrictToInteger()
{
  this.value = this.value.replace(/[^\d.]/g, '');
}

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

Answer 3

HTML4有一个名为onkeypress的事件。有了该属性，我们可以在不使用其他JS的情况下完成此操作：

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