无需登录 数据私有 本地保存

粘贴事件处理演示 - 监听并解析剪贴板内容

交互 开发工具 事件 剪贴板 演示 粘贴
1
0
0
0
粘贴次数
0
文本格式
0
图片数
0
文件数
0
点击上方区域获得焦点，然后按 Ctrl+V 或 ⌘+V 粘贴
text/plain

尚未粘贴文本内容

text/html

尚未粘贴HTML内容

预览用户粘贴的HTML渲染效果（内容来自您自己的剪贴板）

尚未粘贴HTML内容

尚未粘贴图片

尚未粘贴文件

尚未捕获剪贴板数据

事件日志

等待粘贴事件...

需HTTPS或localhost环境
常见问题 & 知识点
粘贴事件是用户在浏览器中执行粘贴操作（Ctrl+V / ⌘+V 或右键菜单粘贴）时触发的事件。该事件的 clipboardData 属性包含剪贴板中的数据，开发者可以通过 e.clipboardData.getData() 或遍历 e.clipboardData.items 来获取纯文本、HTML、图片、文件等多种格式的数据。
clipboardData（即 DataTransfer 对象）包含以下关键属性：
· types：所有可用MIME类型列表（如 text/plain、text/html、image/png）
· items：DataTransferItemList，每个item有 kind（string/file）和 type（MIME类型）
· files：FileList，包含粘贴的文件（如截图、复制的文件）
· getData(format)：同步获取指定格式的字符串数据
在粘贴事件中，可以通过 e.clipboardData.files 获取图片文件（如截图工具粘贴的PNG图片），然后使用 FileReader 读取为 Data URL 进行预览。也可以遍历 e.clipboardData.items，找到 kind === 'file' 且 type.startsWith('image/') 的item，调用 getAsFile() 获取文件对象。
· 粘贴事件：被动触发，由用户执行粘贴操作时浏览器自动分发，无需额外权限，兼容性好。
· Clipboard API（navigator.clipboard.read()）：主动读取剪贴板，需要用户授权（浏览器弹出权限提示），仅在安全上下文（HTTPS/localhost）中可用，支持更丰富的剪贴板数据访问。
两者可以互补使用：粘贴事件用于实时响应，Clipboard API 用于程序化主动读取。
粘贴事件在所有主流浏览器中均有良好支持（Chrome、Firefox、Safari、Edge）。clipboardData.items 和 clipboardData.files 在现代浏览器中广泛支持。Clipboard API 的 read() 方法在 Chrome 66+、Edge 79+、Safari 13.1+ 中支持，Firefox 支持较晚（需留意版本）。移动端浏览器对粘贴事件的支持也较为完善。
在粘贴事件处理函数中调用 e.preventDefault() 即可阻止浏览器默认的粘贴行为。之后可以完全自定义数据处理逻辑——例如将粘贴的图片上传到服务器、对HTML内容进行清洗过滤、或仅提取纯文本而丢弃格式。这在富文本编辑器、图片上传工具等场景中非常实用。
粘贴事件仅在用户主动操作时触发，浏览器不允许脚本模拟触发粘贴事件来窃取剪贴板数据。Clipboard API 的 read() 需要用户明确授权。在处理粘贴的HTML内容时，应注意XSS风险——不要直接将未经过滤的HTML插入到页面中。对于文件粘贴，应限制文件类型和大小，防止恶意文件上传。
剪贴板中的数据以MIME类型标识格式。常见类型包括：text/plain（纯文本）、text/html（HTML格式）、image/png（PNG图片）、text/uri-list（URL列表）等。同一份剪贴板数据可以同时包含多种格式（如从网页复制时同时包含纯文本和HTML），粘贴目标可以选择最适合的格式进行读取。通过 clipboardData.types 可以查看所有可用格式。
🔧 相关工具