输入文本只允许 3 个特定字符答案

【问题标题】：input text allow only 3 specific characters输入文本只允许 3 个特定字符
【发布时间】：2017-04-19 06:53:01
【问题描述】：

给定一个只接受一个字符输入的文本字段，如下所示：

<input type="text" maxlength="1" name="k1" placeholder="?" />

是否可以进一步限制文本输入，以便仅验证 1、X 或 2（如在投注系统中）？

【问题讨论】：

为此使用 Javascript。
你能指导我吗？或者告诉我要搜索什么，因为我已经尝试了好几天了:)
查看stackoverflow.com/questions/22086823/…

标签： php html

【解决方案1】：

<input type="text" max-length="1" name="k1" placeholder="?" pattern="[ABC]" />

将允许字母 A、B 和 C。您可以将 A、B 和 C 替换为您想要的任何内容

浏览器支持：http://caniuse.com/#feat=input-pattern

正则表达式指南：https://msdn.microsoft.com/en-us/library/az24scfc(v=vs.110).aspx

【讨论】：

【解决方案2】：

为了允许 1 2 和 X ，这里

pattern="[12X]" 表示 1、2 或 X

注意： 仅<input type="text" max-length="1" name="k1" pattern="[12X]" />这将不起作用，除非您有表格并提交。这将允许您在输入框中输入任何字符。这将在用户提交时生效。

<form>
    <input type="text" max-length="1" name="k1" pattern="[12X]" />
    <input type="submit">
</form>

【讨论】：

【解决方案3】：

至少有两种方法可以做到这一点，一种是使用 pattern 属性，这是一种非 JavaScript 解决方案，当然可以；请参阅下面其他人提供的解决方案。但是，如果您真的需要更多限制，这里有一个 JavaScript 解决方案，可以阻止用户提交无效数据。

HTML：

<form>
<label>Enter 1, 2, or x</label>
<input id="myinput" maxlength="1" type="text">
<input type="submit"><input type="reset">
</form>

JavaScript：

myinput.oninput = function() {
  if (myinput.value != 1 && myinput.value != 2 && myinput.value != 'x') {
    alert("Invalid: " + myinput.value);
  }
};

完整的工作示例here

探索 oninput 和其他事件的好资源：https://javascript.info/events-change-input

【讨论】：