js实现复制内容到剪贴板 - clipboard.js使用简介

本篇文章介绍了clipboard.js的使用方式，借助它可以在项目中快速实现将内容复制到剪贴板的功能。

---

项目中遇到一个点击复制按钮将对应内容复制到剪贴板的需求，刚开始找到的一些插件，要么兼容性有问题，要么是调用起来比较麻烦，感觉不顺手，后来找到了clipboard.js，感觉调用方便且兼容性不错。

使用方式

第一步 下载

方式1：通过github下载项目源文件 ： 点击跳转至github
方式2：直接下载用于项目的引用文件：点击跳转至csdn资源页面

第二步 引用

在页面中引用clipboard.min.js文件**或者**clipboard.js文件，如果第一步是从github下载的，这两个文件在clipboard文件夹下，如果第一步是从csdn资源页下载的，解压后就可以看到这两个文件了，引用代码如下。

<script src="./****/clipboard.min.js" type="text/javascript" charset="utf-8"></script>

第三步 编写HTML结构

HTML包含两部分，容器和按钮，首先给容器设置ID，然后给按钮增加自定义属性data-clipboard-target，属性值为容器ID即可，代码如下：

<input type="text" name="foo" id="foo" value="" /> //容器
<button class="btn" data-clipboard-target="#foo">复制</button>  //按钮

第四步 初始化

首先给按钮设置class或id,然后在script标签中通过new Clipboard()方法初始化即可，代码如下：

var clipboard = new Clipboard('.btn');

此时，点击button按钮后，即可复制容器中的文字内容，复制后可直接通过ctrl+v进行粘贴使用。