共计 2808 个字符，预计需要花费 8 分钟才能阅读完成。
clipboard.js
将文本复制到剪贴板应该不难。配置它不需要几十个步骤，也不需要加载数百 KB 的 js 文件。但最重要的是，它不应该依赖
Flash或任何臃肿的框架。这就是clipboard.js存在的原因。
安装
从npm 安装
npm install clipboard --save
或者，如果您不喜欢包管理，只需下载一个 ZIP 文件
设置
-
script引入<script src="dist/clipboard.min.js"></script> - 三方
CDN引入
现在需要通过传递一个 DOM 选择器、一个 HTML 标签或者一组 HTML 标签来实例化它
new ClipboardJS('.btn'); // 通过类名.btn 的元素实例化
在内部，我们需要获取与选择器匹配的所有元素，并为每个元素附加事件监听器。但你猜怎么着? 如果有数百个匹配项，则此操作会消耗大量内存。
因此，我们使用事件委托，它将多个事件侦听器替换为一个侦听器。
使用方法
我们正在经历一个声明性的复兴，这就是为什么我们决定利用 HTML5 的数据属性来获得更好的可用性
复制
相当普遍的使用场景是从其他元素复制文本。在触发元素上添加 data-clipboard-target 属性，该属性值用来匹配另一个元素选择器。
<!-- Target -->
<!-- <input
id="bar"
value="无敌大帅哥"
> -->
<p id="bar"> 无敌大帅哥 </p>
<!-- Trigger -->
<button class="btn" data-clipboard-target="#bar" > 复制 </button>
剪切
另外，也可以定义 data-clipboard-action 属性为 copy/cut 来，明确操作是 复制 / 剪切
如果忽略了这个属性，便默认 复制
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
正如上例，剪切 cut 的操作只能在 <input> 和 <textarea> 标签中起作用，在其他标签中会出现事件正常调用，但是操作是失败的，粘贴板是没有改变的。
通过属性复制文本
我们甚至不必需要其他承载文本的元素，仅通过 在触发元素中 添加 data-clipboard-text 属性 来完成复制
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
注意：
-
data-clipboard-text“级别最高”，在data-clipboard-target等属性存在时，复制内容及相关参数以data-clipboard-text为准
事件
回调函数：success / error
| 事件名 | 参数 |
|---|---|
| success | event.action copy/cut 操作 |
event.text copy/cut 操作文本内容 |
|
event.triger 触发操作的 DOM 元素 |
|
| error | event.action copy/cut 操作 |
event.triger 触发操作的 DOM 元素 |
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);
});
工具提示
每个应用程序有不同的设计需求，这就是为什么 clipboard.js 不包括任何 CSS 或内置的工具提示解决方案。
您在这个演示站点上看到的工具提示是使用 GitHub 的 Primer 构建的。如果你正在寻找相似的外观和感觉，你可能想看看。
高级用法
如果你不想修改你的 HTML，有一个非常方便的命令式 API 供你使用。您所需要做的就是声明一个函数，执行您的操作，然后返回一个值。
例如 如果想动态的设置一个目标元素target，则需要返回一个节点, 即 动态设置点击复制的目标元素
new ClipboardJS('.btn', {target: function(trigger) {return trigger.nextElementSibling || document.getElementById('name');
}
});
如果想动态设置内容文本text，则返回一个字符串String
new ClipboardJS('.btn', {text: function(trigger) {return trigger.getAttribute('aria-label') || 'default text';
}
});
在Bootstrap Modals 中或与任何其他更改焦点的库一起使用时，将希望将焦点元素设置为 container 值。
new ClipboardJS('.btn', {container: document.getElementById('modal')
});
并且，如果在单页应用中使用时，要更精确地管理 DOM 的生命周期，可以使用以下方法清除创建的事件对象
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();
浏览器支持
这个库同时依赖于 Selection 和execCommand api。所有浏览器都支持第一个，而以下浏览器支持第二个。
- Chrome 42 +
- Edge12 +
- Firefox 41 +
- IE 9 +
- Opera 29 +
- Safari 10 +
好消息是，如果需要支持旧的浏览器，clipboard.js可以优雅地降级。你所要做的就是显示一个工具提示“复制!”在调用成功事件时，因为文本已经被选中，所以在调用错误事件时，请按 Ctrl+C 进行复制。
你也可以通过运行 ClipboardJS.isSupported() 来检查是否支持 clipboard.js，这样你就可以从 UI 中隐藏 复制 / 剪切按钮。
彩蛋
Chrome 和 Firefox 浏览器扩展：在 GitHub, MDN, Gist, StackOverflow, StackExchange, npm, and even Mediu 的代码块中 添加一个 “copy to clipboard” 的按钮
