如何仅用纯HTML实现文本框仅允许输入字母数字

当然可以！HTML5原生就支持这类输入限制，不用写复杂的JavaScript就能实现核心需求——不过得先说明：纯HTML方案是在表单提交时校验，而不是实时阻止不符合的字符输入（如果要实时拦截，还是需要一点JS辅助，但你要的纯HTML最简方案完全可行）。

直接用<input>的pattern属性配合正则表达式就能搞定，这里有两种简洁写法：

写法1：明确匹配大小写字母 #

<input type="text" pattern="[a-zA-Z0-9]+" title="只能输入字母（不区分大小写）和数字" required>

写法2：用内联修饰符简化正则 #

如果不想写a-zA-Z，可以用正则的内联不区分大小写修饰符(?i)，让正则更简洁：

<input type="text" pattern="(?i)^[a-z0-9]+$" title="只能输入字母（不区分大小写）和数字" required>

参数细节解释： #

• pattern：指定输入内容必须匹配的正则规则，[a-zA-Z0-9]+表示匹配1个或多个大小写字母/数字；如果允许空输入，把+改成*即可。
• title：当用户输入不符合规则并尝试提交时，浏览器会弹出这个提示文本（不同浏览器的提示样式略有差异）。
• required：可选参数，如果要求用户必须填写内容就加上，否则空值会被视为合法（当正则用*时）。

小提醒： #

纯HTML的校验是提交触发式的——用户输入特殊字符时，输入框里会显示，但点击提交按钮后浏览器才会弹出错误提示并阻止提交。如果想要实时过滤非法输入（比如输入特殊字符时直接不让输入），那还是需要结合JavaScript，但这已经是纯HTML能做到的最简方案啦。

内容的提问来源于stack exchange，提问作者diegz25