在网页开发中，实现内容复制功能是非常常见的需求，比如复制订单号、复制分享链接等场景都需要用到。通过封装html函数结合剪贴板API，我们可以快速实现稳定可用的复制功能，不需要引入额外的第三方依赖。
剪贴板API核心方法介绍
现代浏览器提供的剪贴板API主要有两个核心方法，分别是navigator.clipboard.writeText()和navigator.clipboard.readText()，我们实现复制功能主要使用writeText()方法，它接受字符串参数，会将参数内容写入系统剪贴板。
需要注意的是，剪贴板API的使用有安全限制，通常需要在用户主动交互的回调中触发，比如点击事件、键盘事件等，否则可能会被浏览器拦截。
简易复制函数封装
我们可以把复制逻辑封装成一个通用的html函数，方便在不同场景中调用，基础实现如下：
/**
* 复制文本到剪贴板的函数
* @param {string} text 需要复制的文本内容
* @returns {Promise<boolean>} 复制是否成功
*/
function copyTextToClipboard(text) {
// 检查浏览器是否支持剪贴板API
if (!navigator.clipboard) {
console.error('当前浏览器不支持剪贴板API');
return Promise.resolve(false);
}
// 调用API写入内容，返回结果
return navigator.clipboard.writeText(text)
.then(() => {
console.log('内容复制成功');
return true;
})
.catch((err) => {
console.error('复制失败:', err);
return false;
});
}实际使用示例
封装好函数后，我们可以结合页面元素快速实现复制功能，比如给按钮绑定点击事件：
<div>
<span id="copyContent">这是需要复制的测试内容</span>
<button id="copyBtn">点击复制</button>
</div>
<script>
// 获取按钮和内容元素
const copyBtn = document.getElementById('copyBtn');
const copyContent = document.getElementById('copyContent');
// 绑定点击事件
copyBtn.addEventListener('click', async () => {
const content = copyContent.innerText;
const result = await copyTextToClipboard(content);
if (result) {
alert('复制成功');
} else {
alert('复制失败，请手动复制');
}
});
</script>进阶：复制富文本内容
如果需要复制带格式的富文本内容，可以使用navigator.clipboard.write()方法，结合ClipboardItem对象实现，示例函数如下：
/**
* 复制富文本内容到剪贴板
* @param {string} html 富文本的html字符串
* @param {string} text 对应的纯文本兜底内容
* @returns {Promise<boolean>} 复制是否成功
*/
function copyRichTextToClipboard(html, text) {
if (!navigator.clipboard || !window.ClipboardItem) {
console.error('当前浏览器不支持富文本复制');
return Promise.resolve(false);
}
// 构造剪贴板项，同时支持html和纯文本格式
const clipboardItem = new ClipboardItem({
'text/html': new Blob([html], { type: 'text/html' }),
'text/plain': new Blob([text], { type: 'text/plain' })
});
return navigator.clipboard.write([clipboardItem])
.then(() => {
console.log('富文本内容复制成功');
return true;
})
.catch((err) => {
console.error('富文本复制失败:', err);
return false;
});
}兼容性问题处理
部分旧版本浏览器可能不支持剪贴板API，我们可以做降级处理，使用document.execCommand('copy')作为兜底方案，修改后的复制函数如下：
function copyTextToClipboardWithFallback(text) {
// 优先使用剪贴板API
if (navigator.clipboard) {
return navigator.clipboard.writeText(text)
.then(() => true)
.catch(() => fallbackCopyText(text));
}
// 降级处理
return Promise.resolve(fallbackCopyText(text));
}
/**
* 降级复制方法
* @param {string} text 需要复制的内容
* @returns {boolean} 复制是否成功
*/
function fallbackCopyText(text) {
// 创建临时textarea元素
const textarea = document.createElement('textarea');
textarea.value = text;
// 隐藏元素
textarea.style.position = 'fixed';
textarea.style.opacity = '0';
document.body.appendChild(textarea);
// 选中内容并执行复制命令
textarea.select();
try {
const success = document.execCommand('copy');
document.body.removeChild(textarea);
return success;
} catch (err) {
document.body.removeChild(textarea);
console.error('降级复制失败:', err);
return false;
}
}注意事项
- 剪贴板API必须在用户主动交互的回调中调用，否则会被浏览器阻止
- 如果页面是http协议，部分浏览器可能会限制剪贴板API的使用，建议部署到https环境
- 复制富文本时要注意过滤不安全的内容，避免XSS风险
- 降级方案中的
document.execCommand已经在部分浏览器中被标记为废弃，仅作为兼容旧浏览器的兜底手段
Clipboard_APIJavaScripthtml函数内容复制修改时间：2026-06-04 18:05:58