使用HTML5 Clipboard API可实现文本复制，优先采用navigator.clipboard.writeText()异步方法，结合document.execCommand降级兼容旧浏览器，需在用户触发事件中调用并确保安全上下文。
在HTML5中实现复制功能，主要依赖于浏览器提供的剪贴板API（Clipboard API），结合JavaScript可以轻松完成文本的复制操作。过去需要借助Flash或创建临时元素来模拟复制，现在通过现代浏览器原生支持的 navigator.clipboard 接口即可高效、安全地操作剪贴板。
一、使用异步 Clipboard API 实现复制
现代浏览器推荐使用 navigator.clipboard.writeText() 方法进行文本复制，该方法返回一个Promise，需在安全上下文中运行（即HTTPS或localhost）。
基本用法如下：
async function copyText(text) {
try {
await navigator.clipboard.writeText(text);
console.log('文本已复制：', text);
} catch (err) {
console.error('复制失败:', err);
}
}
// 调用
copyText("Hello, HTML5 Clipboard!");
此方式简洁且无需创建额外DOM元素，但必须处理异步和权限问题。
立即学习“前端免费学习笔记（深入）”；
二、兼容旧浏览器的 document.execCommand 方法
对于不支持 Clipboard API 的旧版浏览器（如IE或部分低版本移动端），可使用已废弃但广泛支持的 document.execCommand('copy') 方法。
实现步骤：
- 创建一个临时的input或textarea元素
- 将要复制的文本填入其中
- 选中内容并执行copy命令
- 移除临时元素
示例代码：
function fallbackCopyText(text) {
const input = document.createElement('textarea');
input.value = text;
document.body.appendChild(input);
input.select();
try {
document.execCommand('copy');
console.log('复制成功');
} catch (err) {
console.error('复制失败');
}
document.body.removeChild(input);
}
虽然有效，但document.execCommand已被标记为过时，建议仅作为降级方案。
三、绑定按钮实现用户触发复制
实际开发中，复制操作通常由用户点击按钮触发。以下是一个完整示例：
<button onclick="handleCopy()">复制链接</button>
<script>
async function handleCopy() {
const url = window.location.href;
if (navigator.clipboard && window.isSecureContext) {
// 使用 Clipboard API
await navigator.clipboard.writeText(url);
alert('链接已复制！');
} else {
// 降级方案
fallbackCopyText(url);
alert('请手动复制');
}
}
</script>
注意：出于安全考虑，剪贴板操作必须在用户交互（如点击）中调用，不能在页面加载时自动执行。
四、权限与安全限制
使用 Clipboard API 需注意：
- 仅在安全上下文（HTTPS或localhost）中可用
- 需用户主动触发（如click事件）
- 部分浏览器可能需要请求权限（如Chrome中可通过 Permissions API 检查）
可提前检测权限状态：
async function checkPermission() {
if (!navigator.clipboard) return false;
const permission = await navigator.permissions.query({ name: 'clipboard-write' });
return permission.state === 'granted';
}
基本上就这些。现代项目优先使用异步 Clipboard API，配合降级方案确保兼容性，就能在大多数环境下稳定实现复制功能。
