navigator.clipboard api并非所有浏览器都支持，主要是因为安全限制，该api要求https环境且需用户授权，防止恶意网站窃取剪贴板数据。1. 推荐使用navigator.clipboard.writetext进行复制，但需处理兼容性问题；2. 当api不可用时，降级使用document.execcommand('copy')配合临时textarea实现复制；3. document.execcommand虽已过时但仍可作为备选方案；4. 复制失败时应提示用户并提供手动复制选项；5. 复制html内容可将html字符串放入textarea中执行复制，但可能在目标应用中丢失格式，复杂场景建议使用专用库。完整实现应结合现代api与降级策略确保兼容性和用户体验。
JS实现复制功能，简单来说，就是把一段文本放到用户的剪贴板里，方便他们粘贴到别的地方。这事儿听起来简单，但实际上浏览器出于安全考虑，限制还是挺多的。
navigator.clipboard API是现在比较推荐的方式，但兼容性是个问题。老办法就是创建一个临时的textarea，把文本放进去，选中，然后执行复制命令。
// 使用 Clipboard API (推荐，但需考虑兼容性)
async function copyTextToClipboard(text) {
if (navigator.clipboard) {
try {
await navigator.clipboard.writeText(text);
console.log('Text copied to clipboard');
} catch (err) {
console.error('Failed to copy text: ', err);
// 如果 Clipboard API 失败，降级到老方法
fallbackCopyToClipboard(text);
}
} else {
// 如果 Clipboard API 不可用，降级到老方法
fallbackCopyToClipboard(text);
}
}
// 兼容性更好的老方法
function fallbackCopyToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
// 隐藏 textarea
textArea.style.position = "fixed";
textArea.style.top = 0;
textArea.style.left = 0;
textArea.style.width = "2em";
textArea.style.height = "2em";
textArea.style.padding = 0;
textArea.style.border = "none";
textArea.style.outline = "none";
textArea.style.boxShadow = "none";
textArea.style.background = "transparent";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
}
// 示例用法
const textToCopy = "Hello, world!";
copyTextToClipboard(textToCopy);为什么navigator.clipboard API不是所有浏览器都支持？
安全！浏览器厂商怕你偷偷摸摸地复制用户隐私信息。这个API需要HTTPS环境，而且用户可能会被提示授权。老方法虽然兼容性好，但是创建textarea的过程有点hacky，而且在某些情况下可能会影响页面布局，所以用的时候要小心。
document.execCommand('copy') 已经过时了吗？还能用吗？
document.execCommand('copy')确实是老方法了，官方也标记为“已过时”，不推荐使用。但是！在navigator.clipboardAPI不兼容的情况下，它仍然是一个有用的备选方案。关键在于处理好兼容性问题，做好降级方案。别指望它永远有效，但现在用着还行。
如何优雅地处理复制失败的情况？
复制失败的情况有很多，比如用户拒绝授权，或者浏览器不支持某些API。最简单的做法是提供一个友好的提示信息，告诉用户复制失败了，让他们手动复制。更进一步，可以提供一个按钮，点击后选中文本框里的内容，让用户更容易手动复制。
async function copyTextToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
showSuccessMessage("复制成功！"); // 显示成功消息
} catch (err) {
showErrorMessage("复制失败，请手动复制："); // 显示失败消息
fallbackCopyToClipboard(text); // 尝试老方法
}
}
function showSuccessMessage(message) {
// 实现显示成功消息的逻辑 (例如，弹出提示框)
alert(message);
}
function showErrorMessage(message) {
// 实现显示失败消息的逻辑 (例如，弹出提示框，并显示可手动复制的文本框)
alert(message);
}如何复制HTML代码而不是纯文本？
复制HTML代码比复制纯文本稍微复杂一点。
navigator.clipboardAPI 虽然强大，但直接复制HTML的支持并不好。通常的做法还是借助textarea，先把HTML代码放到textarea里，然后选中并复制。
function copyHTMLToClipboard(html) {
const textArea = document.createElement("textarea");
textArea.value = html;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand('copy');
console.log('HTML copied to clipboard');
} catch (err) {
console.error('Failed to copy HTML: ', err);
}
document.body.removeChild(textArea);
}
// 示例用法
const htmlToCopy = "This is bold text.
";
copyHTMLToClipboard(htmlToCopy);这种方法的缺点是，复制到某些编辑器里可能会丢失HTML格式。如果需要更高级的HTML复制功能，可能需要借助一些第三方库，或者自己实现更复杂的逻辑。
