将 HTML 输入限制为特定的字符类型答案

【问题标题】：Limiting HTML inputs to specific character types将 HTML 输入限制为特定的字符类型
【发布时间】：2020-11-05 16:04:06
【问题描述】：

我想将输入限制为仅限字母（A-Z 或 a-z）。
只使用 HTML 输入元素中的属性，是否可以限制实际输入？

这里有更多细节：

<!-- Code snippet I have now -->
<input type="text" pattern="[A-Za-z]">

使用pattern 属性，这只会让用户知道他们是否不符合模式标准，对吧？它实际上不会阻止他们输入 5 吗？仅使用 HTML 是否可以阻止用户输入数字（或者更具体地说，只允许他们输入 a-z）？

如果不可能，您将如何使用 JavaScript 来实现？我在某处看到他们有一个onkeypress="someFunction()"，他们检查输入字符是否是数字，如果是，他们会以某种方式停止它......这是做这种事情的最好方法吗？
HTML：

<!-- Something like that? -->
<input type="text" onkeypress="someFunction()">

JavaScript：

function someFunction() {
    if (event.key < "A" || event.key > "z") {
        // what would I do here?
    }
}

谢谢！

【问题讨论】：

标签： javascript html validation input attributes

【解决方案1】：

function onlyAlphabet(inputVal) {
  var patt=/^[a-zA-Z]+$/;
  if (patt.test(inputVal)) {
    document.getElementById('text').value = inputVal;
  } else {
    var txt = inputVal.slice(0, -1);
    document.getElementById('text').value = txt;
  }

}

&lt;input id="text" type="text" oninput="onlyAlphabet(value)"&gt;

【讨论】：

oninput 属性到底是什么？是否像onchange 一样，除了它在用户更改输入的瞬间被调用？与 onchange 不同，它仅在用户更改并从输入元素取消焦点时调用
@JacobHornbeck 此事件类似于 onchange 事件。不同的是，oninput 事件在元素的值发生变化后立即发生，而 onchange 事件发生在元素失去焦点、内容发生变化后
好的，谢谢！谢谢是有道理的......我认为这就是我一直在寻找的答案

【解决方案2】：

另一种使用 keydown 事件的方法（不推荐使用 keypress）。

function inputPattern(e) {
  var test = e.key.search(/[a-zA-Z]/);
  if(test < 0) e.preventDefault();
}

<input type="text" onkeydown='inputPattern(event)'>

【讨论】：

【解决方案3】：

我会使用正则表达式来检查是否满足标准，但是是的，我认为这可能是在计划 JS 中执行此操作的最佳方法。我不知道仅使用 HTML 的方法，我认为这是不可能的。

function someFunction(event) {
  // We check the last character inserted
  if (/^[a-zA-Z]$/.test(event.target.value.slice(event.target.value.length - 1))) {
    event.preventDefault();
    // Remove the character from the input
    // Maybe add some class to the element to show error
  }
}

还要注意，agata604 sais 在他的帖子中keypress 已被弃用，最好使用keydown 事件。

【讨论】：

$ 前面的event 参数不代表jQuery 吗？如果不需要的话，我不想包含 jQuery...
它没有，这只是我习惯的约定。为了清楚起见，我将其删除。 :)

【解决方案4】：

我不知道检查是否按下了键，但如果它只是一个输入，那么你可以这样做吗？

<input type="text" pattern="[A-Za-z]" onkeypress="someFunction()">

【讨论】：