pattern属性仅在表单提交时校验，不阻止非法输入；限制字符集须用JavaScript监听input事件并过滤，textarea不支持pattern；后端必须二次校验，inputmode和lang仅优化输入体验。
input 的 pattern 属性只在提交时校验，不阻止输入
很多人以为加了 pattern 就能实时拦住非法字符，结果用户照样能粘贴、输入任意内容，直到点提交才弹错。这是因为 pattern 是表单验证机制的一部分，和输入拦截无关。
真正要限制输入字符集，得靠 JavaScript 监听事件 + 主动过滤：
- 监听
input事件（不是keydown，后者无法捕获粘贴、自动填充等行为） - 用正则匹配当前
value，不符合就回退到上一次合法值 - 注意处理中文输入法组合状态：直接清空会导致输入法中断，建议用
setSelectionRange配合preventDefault更稳妥
示例（只允许数字和字母）：
input.addEventListener('input', e => {
const re = /^[a-zA-Z0-9]*$/;
if (!re.test(e.target.value)) {
e.target.value = e.target.value.replace(/[^a-zA-Z0-9]/g, '');
}
});
textarea 不支持 pattern，必须用 JS 全程控制
textarea 标签根本不解析 pattern 属性，即使写了也完全无效。想限制它的字符集，JS 是唯一路径。
常见错误是只监听 keypress 或 keydown，但这样会漏掉以下情况：
立即学习“前端免费学习笔记（深入）”；
- 右键粘贴（
paste事件必须单独监听） - 拖拽文本进入（
drop事件） - 移动端长按粘贴/语音输入
推荐统一走 input 事件，并在 paste 中同步拦截：
textarea.addEventListener('paste', e => {
e.preventDefault();
const text = e.clipboardData.getData('text');
const cleaned = text.replace(/[^a-zA-Z0-9\s]/g, '');
document.execCommand('insertText', false, cleaned);
});
后端永远要二次校验，前端限制只是体验优化
所有前端字符限制都可被绕过：禁用 JS、手动改 DOM、curl 提交……所以后端收到数据后，必须用相同规则再过滤或拒绝。
尤其注意这些容易忽略的点：
- Unicode 空格（如
u2000～u200F）可能逃过/s/匹配 - 全角数字、字母（如 ＡＢＣ１２３）不属于
[a-zA-Z0-9] - emoji 和增补平面字符（如 ?）长度为 2，用
.length判长度会出错
Node.js 示例（用 grapheme-splitter 处理 emoji）：
const { GraphemeSplitter } = require('grapheme-splitter');
const splitter = new GraphemeSplitter();
const chars = splitter.splitGraphemes(inputString); // 正确计数
用 inputmode 和 lang 辅助输入体验，但不替代校验
inputmode="numeric" 或 lang="zh-CN" 只影响软键盘布局和拼写检查，对字符集无约束力。它们的作用很实际，但常被高估：
-
inputmode在 iOS 上对数字键盘触发更可靠，但 Android 支持参差；设成decimal才显示小数点，numeric不显示 -
lang影响浏览器内置拼写检查，但不会阻止用户输入日文假名或俄文字母 - 两者都不改变表单提交行为，也不触发任何校验逻辑
可以加，但加了就得清楚它只干一件事：让键盘弹得更准一点。
