很久不写前端代码了，最近整一个chrome插件时，希望将数据保存到粘贴版，试了好几种方式，结果发现都不太好使，直接基于输入框来实现赋值粘贴可行，若直接往粘贴板中写数据却没试出来；作为一个前端菜鸟就只能猥琐一点的实现了
下面是一个JS实现向粘贴板中写文本的方式
/** * 写入粘贴板 */ function toCopy(text) { // 将传进来的参数强转为字符串 text = String(text); input = document.createElement('INPUT'); input.style.opacity = 0; input.style.position = 'absolute'; input.style.left = '-9999px'; document.body.appendChild(input); input.value = text; input.select(); input.setSelectionRange(0, text.length); document.execCommand('copy'); document.body.removeChild(input); } 复制代码
从上面的实现可以了解其基本思路：
- 创建一个不可见的input
- 然后将text复制到这个input
- 然后利用
document.execCommand来实现拷贝功能 - 最后移除这个input
注意事项
上面这种方法虽说支持了粘贴板写文本的基本诉求，但同时也存在一些问题
性能隐患
日常开发，我们需要复制的内容一般是一段口令，一个链接，内容信息并不大，使用 execCommand() 方法完全没问题，是无感知的。
但是，如果需要复制的是非常大段的内容，则 execCommand() 方法可能会引起卡顿，因为 execCommand() 方法是一个同步方法，必须等复制操作结束，才能继续执行后面的代码。
无法修改复制内容
这个缺点主要针对的是输入框的部分内容复制到粘贴板，但是因为上面的方法实际上是拷贝我们需要的文本内容，所以就不存在这个问题
浏览器兼容
下面是不同的浏览器的兼容场景，在实际使用时也需要注意
2.Clipboard API
接下来是另外的一种方式，非常简单的一行就可以实现基本诉求
if (navigator.clipboard) { navigator.clipboard.writeText(text); } 复制代码
需要注意的是，上面这个case，直接调用的时候，会提示Document is not focused.，详情可以参考
stackoverflow.com/questions/5…
3. 整合
接下来将上面两个代码封装一下，实现一个文字复制到找剪切板
function toCopy(text) { if (navigator.clipboard) { navigator.clipboard.writeText(text); return; } // 将传进来的参数强转为字符串 text = String(text); input = document.createElement('INPUT'); input.style.opacity = 0; input.style.position = 'absolute'; input.style.left = '-9999px'; document.body.appendChild(input); input.value = text; input.select(); input.setSelectionRange(0, text.length); document.execCommand('copy'); document.body.removeChild(input); }
