在前端开发的世界里，复制粘贴功能就像是那个总是被忽视，却在关键时刻能救你一命的老朋友。我们习惯了用那些古老的魔法咒语（document.execCommand('copy')）来实现这一功能，但时代在进步，技术在更新，是时候告别那些让人头疼的兼容性问题，迎接新时代的剪贴板API了。
旧时代的遗物
在那个遥远的时代，我们为了实现复制粘贴功能：
-
不得不创建一个神秘的
textarea元素， -
然后让它隐形（通过CSS隐藏）
-
给它赋予力量（设置值）
-
将它召唤到页面的某个角落，然后通过古老的仪式（调用
select方法和execCommand） -
最后在一切完成之后，让它消失在历史的长河中（移除元素）。
代码如下：
// 创建一个临时的 textarea 元素
const textarea = document.createElement('textarea');
// 设置 textarea 的内容
textarea.value = inputElement.value;
// 防止在页面上显示 textarea
textarea.setAttribute('readonly', '');
textarea.style.position = 'absolute';
textarea.style.left = '-9999px';
// 将 textarea 添加到页面中
document.body.appendChild(textarea);
// 选中 textarea 的内容
textarea.select();
// 尝试执行复制操作
const success = document.execCommand('copy');
// 移除 textarea 元素
document.body.removeChild(textarea);
// 根据复制操作的成功与否给出提示
if (success) {
alert('复制成功！');
} else {
alert('复制失败，请手动复制。');
}
这个过程虽然繁琐，但在当时，它是我们唯一的选择。
新时代的使者
随着navigator.clipboard API的诞生，我们终于可以告别那些复杂的仪式。这个API提供了两个强大的方法：writeText和readText。writeText方法允许我们异步地将文本写入剪贴板，而readText则可以读取剪贴板中的文本。这两个方法的使用非常简单，只需要几行代码，就可以实现复制和粘贴的功能。
复制功能的实现
const copyText = async (text) => {
try {
await navigator.clipboard.writeText(text);
console.log('复制成功！');
} catch (err) {
console.error('无法复制: ', err);
}
};
粘贴功能的实现
const pasteText = async () => {
try {
const text = await navigator.clipboard.readText();
console.log('粘贴成功: ', text);
} catch (err) {
console.error('无法粘贴: ', err);
}
};
兼容性与挑战
Navigator 这种新 API 都是需要事先授予权限的，而权限是通过 Permissions API 获取的。这时候，我们需要用户明确授权。
虽然新API带来了便利，但它并不是万能的。在某些环境下，比如安卓的 WebView，我们可能会遇到权限问题。
Permissions API MDN
注意
Permissions API在安卓的WebView中是没实现的。很多小伙伴都容易在这里栽跟头
此时，为了兼容，我们可以在代码里加一个Permissions API的判断, 例如：
if (navigator.clipboard && navigator.permissions) {
await navigator.clipboard.writeText(val)
}
结语
随着技术的发展，我们有理由相信，未来会有更多简单、强大、兼容性更好的API出现。但在那之前，让我们拥抱navigator.clipboard，享受它带来的便利，同时也不忘那些曾经陪伴我们度过难关的老方法。毕竟，navigator.clipboard 在一些特别的情况下表现得不那么优秀，我们可以结合二者来实现一个，在各种情况下都通用的“复制粘贴”：
const copyText = async (val) => {
try {
// 使用现代 API 尝试复制
if (navigator.clipboard && navigator.permissions) {
await navigator.clipboard.writeText(val);
return; // 如果成功，直接返回
}
// 降级方案
const textArea = document.createElement('textArea')
textArea.value = val
textArea.style.width = 0
textArea.style.position = 'fixed'
textArea.style.left = '-999px'
textArea.style.top = '10px'
textArea.setAttribute('readonly', 'readonly')
document.body.appendChild(textArea)
textArea.select()
// 尝试执行复制操作
const success = document.execCommand('copy');
if (!success) {
throw new Error('无法复制文本');
}
// 清理
document.body.removeChild(textArea);
} catch (err) {
console.error('复制失败:', err);
}
};
