答案是使用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);
});
基本上就这些。只要注意权限、安全限制和兼容性，就能在现代网页中稳定实现粘贴功能。
