如何在 html 文本框中只允许 4 位数字？

Question

我试图限制 HTML 文本框中的用户只插入 4 位数字 0-9。

我已经尝试如下，但它仅限于允许两位数字。

 <input type="text"  name="pincode" maxlength="4"  id="pin" pattern="^0[1-9]|[1-9]\d$" required/>

原文由 Nur Selam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

让我澄清一下：任何 ^[0-9]{4}$ 或 ^\d{4}$ 都是有效的正则表达式，仅将值限制为 4 位数字。但是， pattern HTML5 属性 值已经默认锚定：

此属性使用的正则表达式语言与 JavaScript 中使用的相同，除了 pattern 属性与整个 value 匹配，而不仅仅是任何子集（有点 好像它在开头暗示了一个 ^(?: 模式和 )$ 结尾）。

所以，只使用 pattern="\d{4}" ：

 input:valid {
  color: green;
}
input:invalid {
  color: red;
}

 <form name="form1">
 <input type="text"  name="pincode" maxlength="4"  id="pin" pattern="\d{4}" required/>
 <input type="Submit"/>
</form>

BTW, your ^0[1-9]|[1-9]\d$ pattern matches only 2 digit inputs because it matches either 0 followed by any digit from 1 to 9 , or any从 1 到 9 的数字后跟任何数字。

另外，请注意 pattern="\d{4}" 属性不会阻止在字段中输入非数字符号。请参阅 如何防止在输入字段中输入无效字符 发布如何解决该问题。

原文由 Wiktor Stribiżew 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

请尝试添加以下内容：

 <input type="text"
       maxlength="7"
       onkeypress='return event.charCode >= 48 && event.charCode <= 57'
       required
/>

原文由 Khaleel Hmoz 发布，翻译遵循 CC BY-SA 3.0 许可协议