用户点击或者长按就可以将内容复制到剪贴板，这个功能很常见，实现起来却有一些讲究。下面我来简单总结一下它的实现方法和存在的一些问题是如何解决的。

实现这个功能基本上就是两种方法：

1.使用第三方库：clipboard.js（https://clipboardjs.com/）

2.原生方法：document.execCommand()

接下来，分别搞个demo来用一下。

一、clipboard.js

打开官网，可以看一下，和通常的模块一样，有两种引用方式：

1、引用js文件

2、npm install

实例化：

这里演示一下DEMO，就别下载了，直接引用CDN的地址就行。

demo的代码结构如下：

从上面这段代码可以看到，在button标签中添加了一个data-clipboard-target属性，它的值是需要复制input的ID，顾名思义是从整个标签中复制内容。上面这段代码就实现了，点击BUTTON时，将INPUT里的VALUE值复制到了剪贴板。

回调事件：

有的时候我们需要在复制后做一些事情，这个时候就需要回调函数的支持。这个库也提供一些回调处理函数。

回调函数两个，复制成功后返回函数success，和失败时的返回error，返回的内容，这里，就不多解释了，直接看一下返回的数据结构。

clipboard使用起来是不是很简单，但是，就为了一个copy功能就使用额外的第三方库是不是不够优雅，这时候该怎么办？所以，下面我来写原生方法怎么实现。

二、 document.execCommand()

定义：

先来看一下，这个方法是怎么定义的：

大概的意思就是可以允许运行命令来操作可编辑区域的内容，注意，是编辑区域。

语法：

使用语法方式是这样的：

追一句，aCommandName表示命令名称，比如：copy，cut等。

看一下兼容性：

这个方法在之前的兼容性其实是不太好的，但是好在现在已经基本兼容所有主流浏览器了，在移动端也可以使用。到caniuse搞张图看一下，如下：

知道了定义，语法和兼容性，接下来我们我们看一下如何使用（我单独搞一个小段来说一下）：

三、document.execCommand()使用和一些问题

比如：现在页面上有一个标签，我们想要复制其中的内容，就可以这么写：

有的时候页面上并没有input标签，我们可能需要从一个p中复制内容，或者直接复制变量。

还记得在execCommand()方法的定义中提到，它只能操作可编辑区域，也就是意味着除了input，textarea这样的输入域以外，是无法使用这个方法的。

那怎么搞？那就将它变成一个可编辑的区域就行了。看一下

完美实现。就这样完了吗，不行，在移动端还是有一些BUG的，下面来列一下。

四、移动端下的BUG

在IOS下有两个问题

1、点击复制时屏幕下方会出现白屏抖动

仔细看是拉起键盘又瞬间收起，既然是拉起键盘，那就是聚集到了输入域，我们只要让输入域不可输入就好了，在代码中添加

input.setAttribute('readonly','readonly')

使这个input是只读的，就不会拉起键盘了。

2、无法复制

这个问题是由于 input.select()在IOS下并没有选中全部内容，我们需要使用另一个方法来选中内容，这个方法就是：

input.setSelectRange(0,input.value.length)

完成的代码可以这么写：

最后总结一下：

每个方法学习都是这样的，知道它的使用规则不难，让它在应用场景中完美应用可能是需要我们动脑子的地方。本文如有误，欢迎留言。