如何强制用户只输入数字答案

【问题标题】：How to force the user to put only numbers如何强制用户只输入数字
【发布时间】：2019-04-09 20:45:36
【问题描述】：

我希望用户只能使用数字输入我已经尝试过 oninput="this.value = this.value.replace(/[^0-9.]/g, '') 之类的几种方法以及更多方法，但例如我在输入字母并按住键盘上的字母时发送的代码它不会变成任何东西，我需要一个 100% 强制用户只输入数字的代码，不管发生什么。如果我可以在输入框中输入一个用户无法删除的数字，例如 0，那就太好了。

【问题讨论】：

请通过edit添加您的问题minimal reproducible example。显示输入中使用的 HTML 以及您当前或以前的尝试非常重要。没有任何依据很难帮助你。
这是用户要填写的 HTML 表单吗？如果是这样，您可以尝试
@DerekK 不，你可以写 e 和 .在里面
@CalvinNunes 我只需要如何在输入中写入 0 并且不会让用户删除它
好的，但是，您尝试了什么？我们可以看到您的代码，然后帮助调试它并找到解决方案吗？

标签： javascript validation forms

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

不是答案，请查看：How to Answer
?问题是如何允许用户只写数字。我回答这个问题。不知道哪一部分违反了规则:)
@PavelKratochvil 我的意思是只有数字没有 e 和 .
stackoverflow.com/questions/37043867/… 这个帖子也很有帮助
你没有回答。他试图只在输入中输入数字（我们甚至不知道它是如何创建的），而您的答案没有解释他应该做什么以及为什么它会帮助他。您刚刚指出了一个链接说“使用规范”。这更像是一个评论而不是一个真正的答案。但是，这取决于你把它放在这里

【解决方案3】：

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

input:invalid {
  color: red;
}

&lt;input type="text" pattern="[0-9]+"/&gt;

那我们就可以开始看constraint validation API了：

约束验证 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>

【讨论】：

但是你看到你的代码的问题是，如果我输入文本，例如：ABC并且我点击提交，我在输入文本后不能输入数字并且它会被窃听

【解决方案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">

【讨论】：