var userName = document.querySelector（'#numberField'）; userName.addEventListener（'input'， restrictNumber）; 函数限制数字（e） { var newValue = this.value.replace（new RegExp（/[^\d]/，'ig'）， “”）; this.value = newValue; } <输入类型=“文本” id=“数字字段”>

您可以尝试使用" 'onkeydown " '事件并取消事件(事件。preventDefault或类似的)当它不是允许的键之一。

正则表达式和匹配函数可以很好地处理这种情况。例如，我使用下面的代码来验证图上作为坐标的4个输入框。它运行得相当好。

function validateInput() {
   if (jQuery('#x1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null || 
       jQuery('#x2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null || 
       jQuery('#y1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
       jQuery('#y2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null) {
         alert("A number must be entered for each coordinate, even if that number is 0. Please try again.");
         location.reload();
   }
}

你可以使用pattern:

<input id="numbers" pattern="[0-9.]+" type="number">

在这里你可以看到完整的手机网站界面提示。

Use:

<script>
    function onlyNumber(id){ 
        var DataVal = document.getElementById(id).value;
        document.getElementById(id).value = DataVal.replace(/[^0-9]/g,'');
    }
</script>
<input type="text" id="1" name="1" onChange="onlyNumber(this.id);">

如果你想在按下键后更新一个值，你可以改变onChange为onKeypress, onKeyDown或onKeyup。但是事件onKeypress不会在任何浏览器中运行。

我看到过很多用javascript回答这个问题的问题，但最好的答案是使用type="number"，并使用css删除旋转按钮，为什么需要这样做的大部分原因是旋转按钮在使用时不会发出更改事件。

解决方案:

HTML

<input type="number" class="input-class">

CSS

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}