输入 type="number" 只允许输入数字

Question

我想创建一个只能写入自然数的输入字段。 （是的，我知道这可能是一种不好的做法，因为用户没有得到任何反馈）。 如果您键入的不是数字，它不应该出现在输入中。 我想使用纯 JavaScript（没有 JQuery）。

这就是我通常的做法：

<input oninput="this.value = this.value.replace(/\D+/g, '')">

但我发现，<input type="number"> 更适合移动设备，因为它不显示整个键盘，而只显示数字。

所以我的问题是，我如何将type="number" 与过滤相结合（并使其与剪切/复制/粘贴兼容）？

如果输入任何非数字字符，<input type="number">-元素的值始终为空字符串。所以我上面的过滤方法不起作用。有什么解决办法吗？

如果没有，我将不得不监听 keydown、paste、cut 以及可能更多的事件。我必须考虑哪些事件，我将如何实现它，还有没有我忽略的更简单的方法？

Answer 1

尝试使用inputmode 属性

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

<input inputmode="numeric" oninput="this.value = this.value.replace(/\D+/g, '')"  />

参考文献

https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode

Answer 2

在 Chrome 中测试（只能输入数字，-和e

在 Firefox 中，您可以输入但不能提交

Try typing anything and then hit enter
<form>
<input type="number" required />
</form>

那么让我们试试这个 - 如果在输入字符时可以清除该字段，我们不需要 keyUp 等

如果您在任何地方输入字符，Firefox 将返回空字符串，Chrome 将不允许该字符

document.querySelector("form").addEventListener("input",function(e) {
  const tgt = e.target;
  if (tgt.type && tgt.type==="number") { 
    const val = tgt.value;
    const nums = val.replace(/[^\d.-]/g, '');
    if (!/\d+/.test(val)) tgt.value="";
  }  
})

Try typing anything and then hit enter
<form>
<input type="number" required />
</form>

Answer 3

这是一个使用 HTML 和 vanilla JS 的解决方案：

function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  });
}

setInputFilter(document.getElementById("numTxtBox"), function(value) {
  return /^-?\d*$/.test(value); });

  <tr><td>Number Only </td><td><input id="numTxtBox"></td></tr>

更新：

上述代码在 Firefox 和 Chrome 中确实出现故障。

这是一个适用于所有浏览器的替代解决方案！

function validate(num) {
  var theEvent = num || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      var key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

<input type='number' onkeypress='validate(event)' onpaste='validate(event)' />