如何只允许在 input\[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 ）然后按点（ . ）时，+ 或 - 输入字段的内容会被浏览器自动删除（值设置为“”=空字符串）。但为什么？将类型从 number 更改为 text 似乎可以解决问题。但是后来我失去了输入字段的向上/向下箭头功能。有任何想法吗？

原文由 Krisztián Balla 发布，翻译遵循 CC BY-SA 4.0 许可协议

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">

Here digits from 0 to 9 are allowed using the event.charCode from 48 to 57 .

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

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" />

但是： 如果您将输入定义为数字类型，则不需要正则表达式。因此，您只需要像这样定义输入，并且您应该根据自己的情况：

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

[解决方案]

为了完全满足您的需求，我提供了一个解决方案，可以捕获输入的 keydown 事件并检查是否有任何“。”在输入上。如果是，我会阻止 char 进入输入。

 document.getElementById("integer").addEventListener('keydown', restrictToInteger);
var lastCodeWasDot = false;
function restrictToInteger(e)
{
   var inputValue = document.getElementById("integer").value;
   var isDot = false;
   var isDot = (e.keyCode && e.keyCode == 110) || (e.charCode && e.charCode == 190);
   console.log(e.keyCode);
   if(isDot && (inputValue.indexOf(".") > -1 || inputValue == "" || lastCodeWasDot)) {
       e.preventDefault();
   }
   lastCodeWasDot = isDot;

}

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

_解释解决方案_：

由于 跨浏览器兼容性，需要代码行 var isDot = (e.keyCode && e.keyCode == 110) || (e.charCode && e.keyCode == 190) || false; 。

我现在不知道为什么，但是如果您尝试从 firefox 中的输入数字类型获取值，并且如果该值以点结尾，您将获得的值将没有输入的最后一个点。为了解决这个问题，我需要添加变量 lastCodeWasDot 来解决这个问题。

注意： 数字输入可以接受浮点数，包括负号和 e 或 E 字符（查看 这篇 文章）

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