Javascript：为什么数字模式在打字时不起作用？ [复制]答案

【问题标题】：Javascript: Why does digit pattern have no effect while typing? [duplicate]Javascript：为什么数字模式在打字时不起作用？ [复制]
【发布时间】：2021-07-24 19:25:42
【问题描述】：

我正在尝试创建一个文本框，在用户输入时只能接受数字。

我说的是现场情况，我不需要只在提交时检查它。

为此，我在文本框中添加了以下属性：

pattern="[0-9]*"

但是，它不起作用：我仍然可以输入任何类型的字符，例如“a”、“b”，而不仅仅是“0”、“1”。

这是我的错吗？

谢谢！

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<input class="input {{fields[$index].class}}" 
  ng-disabled="field.disabled != ''"  
  ng-required="field.name == zipcode"
  ng-model="fields[$index].value"
  name="{{field.name}}"
  type="text"
  id="{{field.name}}"
  maxlength="6"
  pattern="[0-9]*"
>
<label placeholder=" {{field.label}}">

</label>

【问题讨论】：

模式不会阻止您输入非模式字符，它们只是确定表单的有效性
@AndyRay 我该怎么做？
使用 javascript... 作为您选择的标签建议我们在您的问题中找到
我看到过类似的问题，有各种各样的解决方案，而且大多数都有警告。这就是为什么我一直在寻找一个干净的解决方案，它可以在所有设备和所有现代浏览器上以及我当前的文本框上运行。
@ikiK 谢谢，但我还是新手。这就是为什么我希望这种简单的模式无需任何进一步的编码就能解决我的问题。

标签： javascript angularjs

【解决方案1】：

您可以在每次输入文本时检查有效性。

let prevVal = "";
document.querySelector('input').addEventListener('input', function(e){
  if(this.checkValidity()){
    prevVal = this.value;
  } else {
    this.value = prevVal;
  }
});

&lt;input maxlength="6" pattern="[0-9]*"&gt;

详细了解验证here。

【讨论】：

谢谢。你认为你能告诉我如何让它只“响应”这个特殊的文本框吗？我还有其他文本框也应该允许其他字符。换句话说：您的解决方案对我来说仍然是通用的。你能告诉我如何将它连接到我的文本框吗？
@tmighty 你可以给它一个 id 并使用document.getElementById("yourId") 而不是document.querySelector('input')。
谢谢。你能告诉我 checkValidity 是什么样的吗？
@tmighty 你什么意思？ checkValidity 是输入元素的内置方法。