聊聊网页中一键复制功能的实现方案
这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战
介绍
我们或许经常在开发需求里遇到像一键复制这个功能，用户点击一下按钮，指定的文本内容就自动进入用户的剪贴板里面了。本期我们就针对一键复制这个功能展开讨论，介绍三种实现方案，分别是document.execCommand方法 、clipboardjs库还有Clipboard API。
execCommand方法
function copyText(str) {
var input = document.createElement("input");
var body = document.querySelector("body");
body.append(input);
input.value = str
input.select();
document.execCommand("copy");
input.remove();
}
document.getElementById("btn").addEventListener("click",function(e){
copyText("copy content");
})
以上代码可以轻松完成一键复制这个功能，其主要目的是创建一个input把要复制的内容写入进去，再执行inputElement.select()将文本选择，才可以使用document.execCommand完成拷贝。
另外，document.execCommand一同有三种方法：
- 复制：
document.execCommand('copy') - 粘贴：
document.execCommand('paste') - 剪切：
document.execCommand('cut')
虽然document.execCommand兼容性比较好绝大部分浏览器都支持它，而且使用也很方便，但缺点也非常明显：
-
如果复制的文本过大，那么页面会出现卡顿甚至失去响应的情况发生。
-
复制的文本必须暂存与input里面的，不能任意写入十分不灵活。
-
尽管它在目前的浏览器中可能仍然有效，w3c已经不鼓励使用它了，以后随时会被淘汰。
clipboardjs库
我们需要提前安装一下clipboard
# NPM
npm i clipboard
# YARN
yarn add clipboard
import ClipboardJS from "clipboard"
let clipboard = new ClipboardJS("#btn", {
text() {
return "copy content";
}
})
clipboard.on('success', e => {
console.log('success', e)
});
clipboard.on('error', e => {
console.log('error', e)
});
clipboardjs这个库其实也是依赖于Selection和execCommand API，只是对execCommand操作进一步封装使其更加的简洁而且这个库的大小压缩后只有 3kb非常的轻量级，也根据旧版本浏览器进行自动降级处理。当然，缺点就是要安装多余的一个库，而且如果文本过大也会出现不同情况的卡顿或者无响应状况的发生。但是，基本已经满足我们大部分开发需求了，具体可以看看其官网还要更多的用法可以解锁——clipboardjs
Clipboard API
Clipboard API 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。
document.getElementById("btn").addEventListener("click",async (e) => {
await navigator.clipboard.writeText('copy content')
})
可以看出异步的Clipboard API去完成一键复制这个功能是多么的方便，解决了document.execCommand诸多的不足。但是如果要访问剪贴板内容,首次需要用户授予从权限后，也就是说如果用户没有授予权限，则不无法使用这个访问功能。这个功能要让用户授权的原因就是，有可能用户把一些敏感数据放在剪贴板，而这个api会随意读取，从而会产生安全风险，所以这个 API 要求授权，来做安全限制。而且要注意的是，目前只允许HTTPS协议的页面和localhost本地页面才能使用这个API。
它的功能可不止于此，它不仅可以写入文本和二进制数据，还还可以读取文本和二进制数据。也就文字，和诸如图片文件都可以完成拷贝和读取，但前提都是要求用户首次访问内容要给予授权。
这是目前浏览器的支持状况，目前来看，出了IE浏览器外，其他浏览器都基本上可以用这个API来完成一键复制这个功能。
