如何强制用户只放数字

Question

我希望用户只能使用输入数字我已经尝试了几个像oninput="this.value = this.value.replace(/[^0-9.]/g, '')和更多的东西但是例如我输入的代码，如果我键入一个字母并继续按下键盘上的字母它将不会转它对任何事情，我需要一个代码，将100％强制用户只键入数字无关紧要发生什么。如果我可以在用户无法删除的输入框中输入一个数字，例如0，那就更好了。

Answer 1

有几种不同的方法可以实现这一点，但其中一种方法是捕获按键本身，如果输入不是数字则返回false。

另外，如果我理解正确，要添加默认值“0”，只需在输入中直接定义它，如value="0"，或者你可以使用placeholder="0"，如果这是你正在寻找的。

<input type="number" value="0" onkeydown="javascript: return event.keyCode === 8 || event.keyCode === 46 ? true : !isNaN(Number(event.key))" />

Answer 2

您可以使用<input type=...>中提到的input specification。

Answer 3

虽然这不会强制用户仅输入数字，但您可能需要考虑使用pattern属性来利用某些内置行为。如果键入非数字字符，文本颜色将变为红色：

input:invalid {
  color: red;
}

<input type="text" pattern="[0-9]+"/>

然后我们可以开始查看constraint validation API：

在将值提交到服务器之前，Constraint Validation API允许检查用户输入表单控件的值。

如果您键入非数字字符并尝试提交表单，您应该会看到显示自定义错误消息的内置工具提示：

const input = document.querySelector('input');

input.addEventListener('invalid', () => {
  if (input.validity.patternMismatch) {
    input.setCustomValidity('Numbers only please!!');
  }
});

input:invalid {
  color: red;
}

<form>
  <input type="text" pattern="[0-9]+"/>
  <button type="submit">submit</button>
</form>

Answer 4

      $("#but").click(function(){
        let inp_val = $("#txt").val();
        if(isNaN(inp_val)){
          alert("Just enter a number.");
          $("#txt").val("");
        }
      })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt">
<input type="button" value="CLICK" id="but">