将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

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 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)'>

Answer 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在他的帖子中所说，keypress已被弃用，最好使用keydown事件。

Answer 4

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

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