答案是使用 Clipboard API 实现粘贴功能。通过监听 paste事件 ，调用 navigator.clipboard.readText() 或 read()方法读取文本或富媒体数据，需在用户触发事件且具备 clipboard-read 权限时执行，支持 https 环境，并结合传统 clipboardData对象 进行兼容性降级处理。
在 html 5 网页中实现粘贴功能，关键在于使用 Clipboard API 读取剪贴板中的数据。现代 浏览器 提供了 异步 接口 来安全地访问剪贴板内容，避免直接操作带来的安全隐患。
启用剪贴板读取权限
要读取剪贴板内容，必须先获得用户的授权。现代 浏览器 要求通过 Permissions API 检查并请求 clipboard-read 权限。
- 仅在用户触发的事件（如粘贴操作）中才能调用剪贴板读取
- 需要 HTTPS 环境（本地开发时 localhost 例外）
监听粘贴事件并读取文本
通过监听 document 上的 paste 事件，可以获取用户粘贴的文本内容。
示例代码：
立即学习 “ 前端免费学习笔记（深入）”；
document.addEventListener('paste', async (event) => {event.preventDefault(); const text = await navigator.clipboard.readText(); console.log('粘贴的文本：', text); // 可将 text 插入到指定元素中 });读取富文本或图片数据
除了纯文本，Clipboard API 还支持读取 HTML、图像等格式的数据。需使用 read() 方法获取 ClipboardItem。
示例：读取图片数据
document.addEventListener('paste', async (event) => {event.preventDefault(); try {const items = await navigator.clipboard.read(); for (const item of items) {if (item.types.includes('image/png')) {const blob = await item.getType('image/png'); const img = document.createElement('img'); img.src = URL.createObjectURL(blob); document.body.appendChild(img); } } } catch (err) {console.error('无法读取剪贴板内容：', err); } });兼容性与降级处理
部分旧浏览器不支持异步 Clipboard API，可结合传统方式降级处理。
例如，在不支持 readText() 时，可通过隐藏的 textarea 获取文本：
document.addEventListener('paste', (event) => {const clipboardData = event.clipboardData || window.clipboardData; const pastedText = clipboardData.getData('text'); console.log('粘贴内容：', pastedText); });基本上就这些。只要注意权限、安全限制和兼容性，就能在现代网页中稳定实现粘贴功能。
