最近写一个多平台接入的代码，有个小需求，一键嵌入代码，Mark一下实现过程和遇到的一些问题，大家共勉。
实现方式
搜索资料常见的就2种方式
1 第三方库：常用的是clipboard.js
2 原生方法：document.execCommand()
简介
1 其实支持这种需求的第方库不是很多，但是最最常用的就是clipboard.js
这是 官网 https://clipboardjs.com/
非常easy 这里就不在多做介绍
2 哈哈惊不惊喜，意不意外，JS竟然原生支持复制到剪切板功能，但是我搜索的资料的时候，很多答案给人的感觉就是JS原生不支持，让我有了JS真lower的感觉。
后来搜索文档发现有个document.execCommand()方法 MDN文档，我就尝试了几次，我这人就喜欢实践出真知，没有详细看文档，但这样也导致遇到了很多不是坑的坑，后边会列出😢😢。
方法介绍
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
返回一个Boolean值表示操作是否成功
aCommandName：表示命令名称，常见的就是copy
aShowDefaultUI：是否展示用户界面，一般都是false
aValueArgument：额外的参数，具体看文档吧，我没有使用过
书接上文，为啥之前我们(主要是我)没有搜索到document.execCommand的相关实现资料呢，因为这个方法兼容性不好，哈哈但是现在兼容性不错，主流浏览器和移动端基本都支持
有图有真相，具体的还可以参考兼容性
html 代码我项目用的是Vue的框架
JS
这是常见的复制输入框的内容。
bug 坑坑
那我如果复制其他标签的内容呢比方说p div span标签内容呢，或者直接赋值呢
这就是我上面说的不好好看文档定义的坑，(其实是咱看着英文就头晕，论会一门外语的重要性😢😢)
重点解释 坑
这就不贴定义了，直接说就是定义这个方法只适用可编辑区域。所以除了inout textarea标签其他标签是通通不行的，那咋办呢。
一个思路
就是写一个看不见的input，把需要复制的值赋给这个输入框
但是这里大家注意哦 不要把input 设置hidden属性，不要问为什么，因为血的教训😢😢
其实我的理解是因为hidden隐藏了，就没办法输入了，就不算可编辑区了
不显示的方法
1 JS创建input标签
const input=document.createElement('input');
document.body.appendChild(input);
input.setAttribute('value','听说你想复制我');
input.select();
2 CSS设置
定位等，自己尝试吧
iOS坑
又是iOS奇葩，在前端这块，我遇到的奇葩iOS文本比安卓多。
现象
1 点击复制屏幕下方会出现抖动，慢动作就是键盘弹起来又瞬间收回去
2 无法复制
原因
1 因为聚焦所以键盘被拉起了
2 input.select()在ios下没有选中全部内容
解决办法
1键盘失去焦点就行，只读 input.setAttribute('readonly', 'readonly')
2 设置选中内容就行， input.setSelectionRange(0, input.value.length)
下面是自己写文章时候的，因为文章是过了N久之后写的，正好看了这个链接，所以也回忆下，Mark下，希望大家都养成及时写文章的习惯。
网友评论