监听 paste 事件并调用 preventdefault() 后手动插入过滤内容，可避免闪动和光标错乱；需用 addeventlistener 绑定、取 clipboarddata 过滤富文本残留与全角符号、用 setrangetext 保持光标位置，并兼容 safari 和微信 webview 的粘贴限制。
怎么监听 input 的粘贴事件并拦截非法内容
直接绑定 paste 事件是最常用也最可靠的入口，但注意：它触发时内容还没进输入框，你有唯一一次机会在 event.preventDefault() 后手动插入过滤后的内容。
常见错误是只监听 input 或 change —— 那时候粘贴早已完成，再删再改会闪动、光标错乱，甚至绕过校验。
- 必须用
addEventListener('paste', handler)，不要用onpaste属性写法（不易管理、难移除） - 在 handler 中调用
event.preventDefault()是前提，否则后续手动inputEl.value = filtered会和浏览器默认行为冲突 - 从
event.clipboardData?.getData('text')取原始粘贴文本，IE 旧版需 fallback 到event.clipboardData或window.clipboardData
过滤中文全角符号、emoji 和富文本残留的实用正则
用户粘贴 Word、微信、网页内容时，常带不可见格式字符（如 \u200b 零宽空格）、全角标点（，。！）、emoji（\u{1F600} 等）—— 这些不是“非法”，但业务上往往要统一转为 ASCII 或清掉。
别用 /[\u4e00-\u9fa5]/g 粗暴删中文，那会误伤用户真实需求；更别信“过滤所有非字母数字”的一刀切方案——邮箱、路径、代码片段立刻报废。
立即学习“前端免费学习笔记（深入）”；
- 只清理富文本残留：
text.replace(/]*>/g, '').replace(/\s+/g, ' ').trim()（先去 HTML 标签，再压空格） - 替换全角标点为半角：
text.replace(/[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u3002\u300c\u300d\u3001\u300a\u300b]/g, match => {' ': ' ', '，': ',', '。': '.', '！': '!', '？': '?', '“': '"', '”': '"', '‘': "'", '’': "'"}[match] || match) - 纯文本场景下屏蔽 emoji：
text.replace(/\p{Emoji_Presentation}|\p{Emoji_Modifier_Base}\p{Emoji_Modifier}/gu, '')（注意需加u标志）
为什么不能在 paste 后直接改 value 而不控制光标位置
直接 inputEl.value = filtered 会导致光标跳到末尾，用户继续打字就插在最后，体验极差；更糟的是，在 composition（中文输入法上屏前）阶段改 value，可能中断输入法状态，出现双字、丢字。
关键不是“能不能改”，而是“改完光标在哪”。现代做法是用 setSelectionRange 锁定位置，或用 document.execCommand('insertText')（已废弃但兼容性好），或更稳妥的 inputEl.setRangeText()。
- 推荐方案：
inputEl.setRangeText(filtered, start, end, 'end')，其中start/end来自inputEl.selectionStart/inputEl.selectionEnd - IE11 及更旧环境 fallback 到
document.execCommand('insertText', false, filtered)，但需确保 focus 状态 - 如果输入框是受控组件（React/Vue），务必同步更新 state，否则下次 render 会覆盖 DOM 修改
移动端 Safari 和微信 WebView 的 paste 兼容陷阱
Safari（尤其 iOS 15+）对 clipboardData 访问更严格：若页面没用户手势触发（比如点击后立即监听 paste），getData('text') 返回空字符串；微信 WebView 则可能完全屏蔽 clipboardData，只能靠 setTimeout 延迟读取 input.value 再清洗。
这不是 bug，是隐私策略升级的结果。强行绕过会失效，得接受“部分场景无法预过滤”的现实。
- 优先检测是否支持
event.clipboardData，不支持就退到input事件 +setTimeout(() => { /* read value */ }, 0) - 微信内建议加提示：“请勿粘贴富文本，可手动输入”——比 JS 做不到还硬扛更诚实
- 不要依赖
navigator.permissions.query({name: 'clipboard-read'})，iOS Safari 不支持该 API
真正难的不是写过滤逻辑，而是判断什么时候该放行、什么时候该阻断、什么时候该提示——比如密码框粘贴应禁止，而 Markdown 编辑器就得允许 HTML 片段。规则永远比代码更复杂。
