复制文字到剪切板的极简实现及扩展
execCommand方法
复制一段文字内容实现的老牌方法就是document.execCommand方法了，示意：
document.execCommand('copy', true);且兼容性超级棒：https://caniuse.com/?search=execCommand
但是execCommand()并没有表面看上去的那么美好。
执行有限制
首先，必须文字内容选中，再执行execCommand()方法才有效，如何让文字选中呢？
通常做法是放在一个<input>或者<textarea>元素中，然后让这个输入框元素选中，示意如下：
textarea.select();
// 执行复制
document.execCommand('copy', true);但是，实际开发，怎么可能让你在页面上塞一个输入框呢？
所以，通常做法是创建一个隐藏的输入框，赋值，选中，然后复制。
// 创建输入框
var textarea = document.createElement('textarea');
document.body.appendChild(textarea);
// 隐藏此输入框
textarea.style.position = 'absolute';
textarea.style.clip = 'rect(0 0 0 0)';
// 赋值
textarea.value = '复制的文本内容...';
// 选中
textarea.select();
// 复制
document.execCommand('copy', true);还没完，有时候，输入框可能不在页面的可视区域之内，此时执行textarea.select()方法会触发浏览器默认的控件跳转行为，也就是页面会触发滚动行为进行重定位。
所以，创建的文本域务必要保证在屏幕区域内，否则复制行为执行的时候，会出现意料之外的体验问题（可以使用固定定位解决）。
性能隐患
其次，就算复制功能实现了，性能也是个需要留意的问题。
日常开发，我们需要复制的内容一般是一段口令，一个链接，内容信息并不大，使用execCommand()方法完全没问题，是无感知的。
但是，如果需要复制的是非常大段的内容，则execCommand()方法可能会引起卡顿，因为execCommand()方法是一个同步方法，必须等复制操作结束，才能继续执行后面的代码。
无法修改复制内容
使用execCommand()方法复制的文字内容，是无法进行修改与替换的，这其实是不友好的，因为对复制或拖拽的本文内容进行处理还是比较常见的。
正是由于以上一些限制，execCommand()已经是不推荐的使用的方法，业界推荐使用全新的 Clipboard API。
虽然不推荐，但是架不住兼容性好，且以后浏览器也没有理由不继续支持（否则影响太大了），因此，execCommand()方法还是目前的主流实现方案。Clipboard API
使用 Clipboard API 实现复制效果就简单了，
if (navigator.clipboard) {
navigator.clipboard.writeText(text);
}其中，text就是需要复制的文本内容，就这么简单。
无需浏览器权限申请，文字内容直接进入剪切板，代码简单，使用方便，同时是异步，不用担心阻塞。
然而，兼容性这块的不足实在是让人遗憾。https://caniuse.com/?search=clipboard
代码整合与封装
所以要复制一段文字到剪切板，可以试试下面的代码：
var text = '被复制的内容~';
if (navigator.clipboard) {
// clipboard api 复制
navigator.clipboard.writeText(text);
} else {
var textarea = document.createElement('textarea');
document.body.appendChild(textarea);
// 隐藏此输入框
textarea.style.position = 'fixed';
textarea.style.clip = 'rect(0 0 0 0)';
textarea.style.top = '10px';
// 赋值
textarea.value = text;
// 选中
textarea.select();
// 复制
document.execCommand('copy', true);
// 移除输入框
document.body.removeChild(textarea);
}包括 IE 在内的浏览器全兼容。可以点击查看示例：http://code.wubin.work/code/js/copy-text/
但是以上代码却没有复制成功的提示效果。所以我结合实际开发需求，重新整个了个 JS 文件，效果是这样的，点击按钮复制后，按钮上方会出现绿色的文字提示一闪而过。
语法如下：
// content 只能是字符串类型
copyText(content);
// 或者
// content 此时也可以是 DOM 元素对象
copyText(button, content);其中：
- button
- 可选。Element。表示触发复制的按钮元素。
- content
- 必须。String|Element。表示需要复制的内容。如果是 DOM 元素，则会使用内部的文本或者值作为复制内容。如果使用的是
copyText(content)语法，content 只能是字符串。
也就是如果有 button 参数，点击时候就会自动出现提示，如果第一个参数是字符串，则直接复制内容。
这样，就可以兼顾多种场景了。
具体效果：http://code.wubin.work/code/js/copy-text/copy-text-demo.html
应用到的库：http://code.wubin.work/code/js/copy-text/copyText.js 大家可以吧这个方法整合到自己的工具函数中。
此 JS 代码片段非常时候需要敏捷开发的演示页面，活动页面，对视觉要求不高的后台页面等。
2022年12月6日测试发现，此插件在IOS上，点击复制会弹出虚拟键盘！用手机打开http://code.wubin.work/code/js/copy-text/copy-text-demo.html这个地址测试，也会有同样问题，所以此插件只能推荐使用在PC页面上，不推荐在手机上使用！
针对上面函数的vue适应
当我们在vue项目中使用上面的copy-text方法的时候，发现会有bug，针对此应用场景，我对此方法进行了修改，具体使用请参考以下案例，应用的注意事项都在以下页面中：
http://code.wubin.work/code/js/copy-text/copy-text-vue.html
应用到的方法：
http://code.wubin.work/code/js/copy-text/copy-text-vue.js
当然这个方法也使用与原生JS的开发环境以及JQ环境，比较兼容。
知名开源 clipboard.js 项目
如果项目对代码体积不那么在意，自己也不想关心具体的实现细节，可以使用这个著名的剪切板项目 clipboard.js：https://github.com/zenorocha/clipboard.js/，不仅有复制的实现，还有剪切等。
在手机上推荐使用这个插件，压缩后11K，github经常打不开，推荐在gitee上查看：
https://gitee.com/xmountain/clipboard.js
插件下载：
http://code.wubin.work/code/js/copy-text/clipboard.min.js
http://code.wubin.work/code/js/copy-text/clipboard.js
基本使用：
<button class="btn"
data-clipboard-text="要复制的内容"
>
点击复制
</button>var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
window.alert('复制成功')
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});经过测试，在手机上使用此插件复制，不会出现虚拟键盘，如果需要在手机上要求效果毕竟好的，可以使用此方法。
目录