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

Question

我有一个输入，我想将输入限制为仅字母（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?
    }
}

谢谢！

Answer 1

我会改用正则表达式来检查是否满足条件，但是是的，我认为这可能是在计划 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 在他的 post keypress 中已弃用，最好使用 keydown 事件。

Answer 2

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

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

Answer 3

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;
  }

}

<input id="text" type="text" oninput="onlyAlphabet(value)">

Answer 4

另一种使用按键事件的方法（按键已弃用）。

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

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

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

Limiting HTML inputs to specific character types

html

javascript

validation

attributes

input