JavaScript复制内容到剪贴板

原文链接：github.com/axuebin/art…

---

最近一个活动页面中有一个小需求，用户点击或者长按就可以复制内容到剪贴板，记录一下实现过程和遇到的坑。

常见方法

查了一下万能的Google，现在常见的方法主要是以下两种：

• 第三方库：clipboard.js
• 原生方法：document.execCommand()

分别来看看这两种方法是如何使用的。

clipboard.js

这是clipboard的官网：clipboardjs.com/，看起来就是这么的简单。

引用

直接引用： <script src="dist/clipboard.min.js"></script>

包： npm install clipboard --save ，然后 import Clipboard from 'clipboard';

使用

从输入框复制

现在页面上有一个 <input> 标签，我们需要复制其中的内容，我们可以这样做：

<input id="demoInput" value="hello world">
<button class="btn" data-clipboard-target="#demoInput">点我复制</button>
复制代码

import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');
复制代码

注意到，在 <button> 标签中添加了一个 data-clipboard-target 属性，它的值是需要复制的 <input> 的 id，顾名思义是从整个标签中复制内容。

直接复制

有的时候，我们并不希望从 <input> 中复制内容，仅仅是直接从变量中取值。如果在 Vue 中我们可以这样做：<