写在前面
想着搞一个 复制文本的方法,复制到剪贴板
没想到现在这个复制的api
那么奇怪,兼容性问题一大堆,干脆整合到一起算了
实现
// 复制内容到粘贴板
function copyToClipboard(val) {
if(val.length==0) return false;
try {
// 现代浏览器推荐方式(需要 HTTPS 环境)
navigator.clipboard.writeText(val)
.then(() => {
console.log("复制成功");
alert("复制成功!");
})
.catch(err => {
console.error("复制失败:", err);
fallbackCopy(val); // 降级方案
});
} catch (err) {
// 兼容旧浏览器
fallbackCopy(val);
}
// 传统复制方法(兼容方案)
function fallbackCopy(val) {
// 创建临时文本域元素
const textarea = document.createElement('textarea');
textarea.style.position = 'fixed'; // 避免影响页面布局
textarea.style.opacity = '0';
textarea.value = val; // 使用 value 而非 innerText 更适合文本域
document.body.appendChild(textarea);
try {
// 选中文本
textarea.select();
textarea.setSelectionRange(0, 99999); // 兼容移动设备
// 执行复制命令
const successful = document.execCommand('copy');
if (successful) {
console.log("传统方法复制成功");
alert("复制成功!");
} else {
throw new Error("复制命令执行失败");
}
} catch (err) {
console.error("复制失败:", err);
alert("复制失败,请手动复制");
} finally {
// 无论复制成功或失败,都移除临时元素
document.body.removeChild(textarea);
}
}
}