Question

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

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

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

Answer 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

Answer 2

允许1 2和X，此处

图案=＆＃34; [12X]＆＃34;意思是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>

Answer 3

至少有两种方法可以做到这一点，一种是使用模式属性，一种非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

输入文本仅允许3个特定字符

3 个答案: