答案：使用 Clipboard API 可在网页中实现复制功能，通过 navigator.clipboard.writeText() 将文本写入剪贴板，需用户点击触发且仅在 HTTPS 或 localhost 环境下可用，兼容旧浏览器可降级使用 execCommand。
在网页中实现内容复制功能，可以直接使用浏览器提供的 Clipboard API，无需依赖 Flash 或复杂的库。现代浏览器都支持这一原生接口，操作简单且安全。
1. 使用 Clipboard API 实现复制
核心方法是调用 navigator.clipboard.writeText()，它会将指定文本写入系统剪贴板。
示例代码：
function copyText(text) {
navigator.clipboard.writeText(text)
.then(() => {
alert('复制成功！');
})
.catch(err => {
console.error('复制失败:', err);
});
}
你可以在 HTML 中这样调用：
立即学习“前端免费学习笔记（深入）”；
2. 复制输入框中的内容
如果想复制用户在输入框（input 或 textarea）里填写或选中的内容，可以先获取选中部分再执行复制。
function copyFromInput(inputId) {
const input = document.getElementById(inputId);
const text = input.value.substring(input.selectionStart, input.selectionEnd) || input.value;
navigator.clipboard.writeText(text)
.then(() => {
alert('已复制到剪贴板');
})
.catch(err => {
console.error('复制失败:', err);
});
}
HTML 示例：
3. 注意事项与兼容性
- 需要在 HTTPS 环境 或本地开发环境（localhost）下运行，否则部分浏览器会拒绝访问剪贴板。
- 用户必须有明确交互行为（如点击按钮）触发复制，不能自动静默复制。
- 某些旧浏览器（如 IE）不支持该 API，可做降级处理，例如使用 document.execCommand("copy")（已废弃但仍有兼容价值）。
4. 完整简易接入方案
以下是一个通用的小函数，兼容现代和较老浏览器：
function simpleCopy(text) {
if (navigator.clipboard) {
// 现代方式
navigator.clipboard.writeText(text).catch(err => {
console.error('异步复制失败', err);
});
} else {
// 降级：创建临时 textarea 并使用 execCommand
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed';
textarea.style.opacity = '0';
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand('copy');
console.log('同步复制成功');
} catch (err) {
console.error('execCommand 复制失败', err);
}
document.body.removeChild(textarea);
}
}
基本上就这些。只要几行代码就能让网页具备复制能力，关键是理解 Clipboard API 的使用条件和用户交互要求。
