告别复制粘贴的黑暗时代！教你们一个新崛起的API

在前端开发的世界里，复制粘贴功能就像是那个总是被忽视，却在关键时刻能救你一命的老朋友。我们习惯了用那些古老的魔法咒语（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

image.png

注意 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);
}
};

`