#前置知识

• Clipboard API: 现代浏览器提供了Clipboard API，它允许网页脚本读取和写入用户的剪贴板，这包括了navigator.clipboard对象和一些相关的异步方法。
• 浏览器兼容性: 虽然大多数现代浏览器支持Clipboard API，但还是建议检查目标用户群体使用的浏览器版本，以确保兼容性。对于不支持该API的旧浏览器，可能需要回退方案或提示用户手动复制。

#实现步骤

#第一步：编写复制函数

我们将创建一个函数copyToClipboard，它接收要复制的文本作为参数，并使用Clipboard API来执行复制操作。

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
          async function copyToClipboard(text) {
    try {
        // 确保当前环境支持 Clipboard API
        if (navigator.clipboard && navigator.clipboard.writeText) {
            await navigator.clipboard.writeText(text);
            console.log('文本已成功复制到剪贴板');
        } else {
            // 对于不支持 Clipboard API 的浏览器，可以提示用户或采用其他方法
            console.error('当前浏览器不支持 Clipboard API');
        }
    } catch (err) {
        console.error('复制到剪贴板时发生错误:', err);
    }
}

        

#第二步：调用复制函数

接下来，在需要触发复制操作的地方调用copyToClipboard函数，并传入想要复制的文本。

          
1
          <button onclick="copyToClipboard('这是要复制的文本')">点击复制</button>

        

#第三步：处理用户反馈

为了提升用户体验，你可以在复制成功后通过修改页面元素或弹出消息来通知用户复制已完成。

          
1
2
3
4
5
6
7
8
9
10
11
12
          async function copyToClipboard(text) {
    // ...之前的代码保持不变...

    try {
        await navigator.clipboard.writeText(text);
        console.log('文本已成功复制到剪贴板');
        // 可以在这里添加UI反馈，如改变按钮文本或显示提示
        document.getElementById('copyButton').innerText = '已复制!';
    } catch (err) {
        // 错误处理...
    }
}

        

我们可以到 MDN 查看更多关于navigator.clipboard.writeText()的用法以及其支持的版本。

#注意事项

在使用navigator.clipboard.writeText之前，需要检查浏览器是否支持该API，navigator.clipboard.writeText是一个异步操作，因此需要使用await关键字，并确保它在一个异步上下文中被调用。