答案是使用Clipboard API实现粘贴功能。通过监听paste事件，调用navigator.clipboard.readText()或read()方法读取文本或富媒体数据，需在用户触发事件且具备clipboard-read权限时执行，支持https环境，并结合传统clipboardData对象进行兼容性降级处理。
在html5网页中实现粘贴功能，关键在于使用 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); });
基本上就这些。只要注意权限、安全限制和兼容性，就能在现代网页中稳定实现粘贴功能。