js复制到粘贴板命令及第三方插件 clipboard 、ZeroClipboard

最近做的一个项目中，有一个点击按钮后，复制文本的需求，关于使用 JS复制文本的情况，很久以前曾经看到过，不过也仅是稍稍有些印象，对于到底如何复制，是否有什么兼容性要求等，都一概不知，但觉得应该没什么难度的。

但是当我自己真正做起来的时候，才发现这其中存在不少坑，各种浏览器实现复制的方法都不一样，而且无论怎么做兼容，似乎都不可能让所有的浏览器都能实现复制到粘贴板的功能。

几种主要方法总结如下。

---

execCommand

关于复制到粘贴板的功能，网上出现频率最多的方法就是 execCommand。

原理其实很简单明确，首先获取你想要复制的文本所在的元素，使用 js选择器即可，例如 document.getElementById('txt')，然后使用 select选择到文本，最后调用 execCommand方法进行复制。

function copy(){
   
    let ele = document.getElementById('txt')
    ele.select()
    document.execCommand('Copy')
}

我用最新版 Chrome试验了一下，这里的 select()方法只对 input 或者 textarea 元素有效，只有txt是 这两个元素时，才有可能复制成功，其他元素全部失败。

这里需要说明的是，document.execCommand() 方法有很多参数，Copy只是其中一个：

// 选中网页中的全部内容
document.execCommand('selectAll')
// 打开 命令，相当于单击文件中的打开按钮
document.execCommand('open)
// 另存为 命令，将当前页面另存为
document.execCommand('saveAs)
// 打印 命令，需要存在打印机
document.execCommand('print)
// 剪贴选中的文字到剪贴板
document.execCommand('Cut','false',null)
// 删除选中的文字
document.execCommand(Delete','false',null)

....等等

以上就是document.execCommand()其中一部分使用方法，当然了，兼容性堪忧，几乎没什么浏览器实现，我用最新版的 Chrome操作以上方法，没一个有响应的。

除了配合