textarea不支持原生中文限制，需用JavaScript监听input事件配合正则/[^\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef\s\n\r\t]/g实时过滤，并处理IME输入状态及光标位置。
textarea 本身不支持“只允许中文”的原生限制，HTML 没有类似 pattern 那样对多行文本生效的强制过滤属性。所谓“只输中文”，必须靠 JavaScript 主动拦截 + 正则判断，且需覆盖所有输入通道。
为什么 pattern 对 textarea 无效？
pattern 属性仅在表单提交时触发校验，且 仅对 input 元素生效，对 textarea 完全无作用。即使你写了 <textarea pattern="[\u4e00-\u9fa5]*"></textarea>，浏览器会忽略它，提交也不会报错。
如何用 JavaScript 实时拦截非中文字符？
核心是监听 input 事件（不是 keydown），并在每次输入后检查并清理非法字符：
- 用正则
/[^\u4e00-\u9fa5\s\n\r\t]/g匹配所有非中文、非空白符（含换行、制表）的字符 - 每次触发
input时执行value = value.replace(/[^\u4e00-\u9fa5\s\n\r\t]/g, '') - 必须手动恢复光标位置，否则粘贴或中间编辑会导致光标跳到末尾：
setSelectionRange()需配合保存/还原selectionStart - 注意：该正则不包含全角标点（如，。！？）、中文引号（“”）、顿号、省略号等；如需支持，得显式加进字符集，例如
[\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef]
示例精简逻辑：
const ta = document.getElementById('chineseOnly');
ta.addEventListener('input', () => {
const pos = ta.selectionStart;
ta.value = ta.value.replace(/[^\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef\s\n\r\t]/g, '');
ta.setSelectionRange(pos, pos);
});
maxlength 和中文限制能一起用吗？
可以，但二者独立运作：maxlength="100" 控制总字符数（按 JavaScript .length），不影响中文过滤逻辑。不过要注意：
立即学习“前端免费学习笔记（深入）”；
- 中文字符基本占 1 个 UTF-16 code unit，所以
maxlength="100"≈ 100 个汉字（生僻字或代理对除外） - 如果你同时做了中文过滤，用户粘贴英文段落会被清空，但
maxlength仍会按剩余中文长度计数，不会“补位” - 服务端仍需重复校验：前端过滤可被绕过（如禁用 JS、直接改 DOM），且正则可能漏判（如某些 Unicode 兼容汉字变体）
真正只让中文生效的关键细节
最容易被忽略的是输入法未上屏状态（IME composition）。用户在中文输入法下敲拼音时，input 事件会先触发未上屏的拼音串（如 “nihao”），此时正则会误删。正确做法是：
- 监听
compositionstart和compositionend事件 - 在
compositionstart时暂停过滤，在compositionend后再执行一次清理 - 否则用户打字过程中会频繁闪退、拼音被砍断，体验极差
没处理 IME 的“中文限制”在 PC 端 Chrome/Firefox 和移动端 iOS Safari 上都会明显失灵——这不是 bug，是规范行为。
