输入类型为“number”，仅允许输入数字

Question

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

这就是我通常的做法：

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

但我发现，

<input type="number">

更适合移动设备，因为它不显示整个键盘，而只显示数字。

所以我的问题是，如何将

type="number"

与过滤结合起来（并使其与剪切/复制/粘贴兼容）？

如果输入任何非数字字符，则

<input type="number">

元素的值始终为空字符串。所以我上面的过滤方法不起作用。有什么解决办法吗？

如果没有，我就必须监听按键、粘贴、剪切以及可能的更多事件。我必须考虑哪些事件，我将如何实施它，以及是否有我忽略的更简单的方法？

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-friend-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)' />

Answer 4

<input onkeydown=this.isNumberInputOnly />

和功能

function isNumberOnlyInput(event) {
    if (!parseInt(event.key) && event.key != 'Backspace') {
        event.preventDefault();
    }
}

大致可以做到这一点