介绍

clipboard.js是一款不依赖flash或任何重量级框架的粘贴复制插件，并且它没有任何非常复杂的配置，这也是它存在的原因。

安装

通过npm安装（或者直接下载js文件引入）

npm install clipboard –save

2.引入js

<script src=”dist/clipboard.min.js”></script>

//官网提供了下载地址，也可以使用免费的cdn

使用

示例

<!DOCTYPE html>
<html class="no-js">
 <head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <title></title>
 <meta name="description" content="" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link
 href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
 rel="stylesheet"
 />
 </head>
 <body>
 <div class="input-group" style="width: 600px;margin:200px">
 <input
 type="text"
 class="form-control"
 id="foo"
 value="https://github.com/zenorocha/clipboard.js.git"
 placeholder="Amount"
 />
 <div class="btn input-group-addon" data-clipboard-target="#foo">复制</div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
 <script>
 new ClipboardJS(".btn");
 </script>
 </body>
</html>

如图书最简单的例子，单机复制按钮即可自动复制文本框的内容

换成下面就会变成剪切，主要是以下属性

data-clipboard-action=”cut”

<div class="input-group" style="width: 600px;margin:200px">
 <input
 type="text"
 class="form-control"
 id="foo"
 value="https://github.com/zenorocha/clipboard.js.git"
 placeholder="Amount"
 />
 <div class="btn input-group-addon" data-clipboard-target="#foo" data-clipboard-action="cut">剪切</div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
 <script>
 new ClipboardJS(".btn");
 </script>

剪切操作仅适用于<input>或<textarea>元素

或者这样，直接复制 data-clipboard-text属性的内容

<button class="btn" data-clipboard-text="要复制的内容">
 复制
</button>

事件监听，可以打开控制台自行尝试

var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
 console.info('Action:', e.action);
 console.info('Text:', e.text);
 console.info('Trigger:', e.trigger);
 e.clearSelection();
});
clipboard.on('error', function(e) {
 console.error('Action:', e.action);
 console.error('Trigger:', e.trigger);
});

高级用法

动态绑定

new ClipboardJS('.btn', {
 target: function(trigger) {
 return trigger.nextElementSibling;
 }
});

动态赋值

new ClipboardJS('.btn', {
 text: function(trigger) {
 return trigger.getAttribute('aria-label');
 }
});

要在Bootstrap Modals中使用或与任何其他更改焦点的库一起使用，您需要将focus元素设置为container值

new ClipboardJS('.btn', {
 container: document.getElementById('modal')
});

更好的管理单页面的DOM生命周期

var clipboard = new ClipboardJS('.btn');
clipboard.destroy();

兼容性

备注

如果需要支持更低版本的浏览器，可以参考官网的介绍，它能够优雅的降级

提供Chrome和Firefox的扩展

一个浏览器扩展，为GitHub，MDN，Gist，StackOverflow，StackExchange，npm甚至Medium中的每个代码块添加“复制到剪贴板”按钮。需要的可以私信或者前往扩展中心自行下载。