onpaste中仅preventDefault()无法阻止富文本粘贴，需手动读取clipboardData.getData('text/plain')并插入纯文本，同时处理兼容性、框架响应及XSS风险。
onpaste 事件里为什么直接 event.preventDefault() 后还出现富文本？
因为只阻止默认行为，没手动读取和插入内容。浏览器在 preventDefault() 后就不管了，你的处理逻辑若没主动写回 DOM，输入框看起来“没反应”或仍插入了原始富文本（尤其在 contenteditable 区域）。
关键点是：拦截 ≠ 清洗。必须自己取 clipboardData.getData('text/plain')，再用 JS 插入纯文本。
-
event.clipboardData在 Safari 某些 iframe 或旧版 Android WebView 中可能为null，务必先判空：const cd = event.clipboardData || window.clipboardData - 读取前检查类型：
cd.types.includes('text/plain')，避免调用getData报错 - 对
<input>和<textarea>，插入后要手动触发input事件：el.dispatchEvent(new Event('input', { bubbles: true }))，否则 React/Vue 等框架无法感知值变化
如何让 onpaste 只取纯文本、不带 HTML 标签和多余换行？
不能依赖正则删 <.*?> —— 它漏掉注释、CDATA、自闭合标签，还可能误杀邮箱里的 @ 符号。正确路径是从源头拿干净数据。
- 优先读
cd.getData('text/plain')；如果为空，再 fallback 到cd.getData('text/html')，然后用DOMParser解析再取textContent - 处理换行：富文本粘贴常带
\r\n或<br>
，textContent会转成单个\n，如需保留段落可正则替换/\n\s*\n/g→\n\n - 示例清洗逻辑：
processedText = rawText.replace(/\s+/g, ' ').trim()，但别过度，比如 OTP 输入框需要保留所有字符（包括空格），此时应跳过 trim
移动端 Safari 和 Android WebView 的 onpaste 兼容性坑怎么填？
iOS Safari 在 contenteditable="false" 的 <input> 上可能根本不触发 paste 事件；Android 旧 WebView 会忽略 preventDefault()，导致过滤失效。
立即学习“前端免费学习笔记（深入）”；
- 兜底方案：监听
input事件，检测新值是否含非键盘字符（如 emoji、中文、换行符），再执行el.value = processedText+el.setSelectionRange(0, 0) - 不要只靠
onpaste做唯一防线，尤其涉及安全敏感字段（如密码、OTP） - 测试时务必真机验证：模拟器常表现正常，但 iOS 实机在微信内嵌页、钉钉 WebView 中行为差异极大
React/Vue 项目中 onPaste 失效的典型原因
不是事件没绑上，而是受控组件生命周期和事件重绑机制在背后干扰。常见现象是“第一次粘贴没反应，第二次才生效”，或“粘贴后值没更新”。
- 别在 JSX 里写内联箭头函数：
onPaste={(e) => handlePaste(e)}—— 每次 render 都生成新函数，React 可能跳过事件重绑 - 确保
valueprop 和 state 同步更新，否则即使你处理了粘贴，UI 也不会刷新 - Vue 用户注意：
@paste绑定需配合v-model正确响应；若用:value+@input模式，记得在 paste 处理完后显式触发$emit('input', processedText)
clipboardData.types，永远做 fallback，永远在生产环境用真实富文本（比如从 Word 复制一段带表格的文字）测一遍。 
