四种实现剪贴板的操作
- 原生
document.execCommand()方法 - 异步的 Clipboard API
-
copy事件和paste事件 - 第三方库 clipboard.js
前三个的详细内容可以查阅阮一峰老师的剪贴板操作 Clipboard API 教程。我们来看看第四种使用 clipboard.js 库简化原生操作。
第三方库 Clipboard.js
首先，在我们的项目中使用 NPM 引入 clipboard：
$ npm i clipboard
或者使用 CDN：
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>
Clipboard.js 的文档已经很全面了，以下是一些简单的实例。
复制文本
通过 data-clipboard-target 绑定相对应的 id 进行匹配：
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
更简便的方法是，使用 data-clipboard-text 属性设置您想包含的内容即可。
<button class="btn" data-clipboard-text="Copy to Clipboard"></button>
剪切文本
定义 data-clipboard-action 属性，以指定是要 copy 还是 cut 内容。
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#foo">
Cut to clipboard
</button>
注意：
cut操作仅适用于<input>或<textarea>元素。
事件
success 和 error 让您监听和实现您的自定义逻辑。
const clipboard = new ClipboardJS('.btn')
clipboard.on('success', e => {
console.info('Action:', e.action)
console.info('Text:', e.text)
console.info('Trigger:', e.trigger)
e.clearSelection()
})
clipboard.on('error', e => {
console.error('Action:', e.action)
console.error('Trigger:', e.trigger)
})
还有一些高级选项，详细见文档。
示例：添加著作权
我们在很多知识分享平台都可以看到，当我们复制一段超过一定字数的内容时，会在您复制的内容最后追加上一段标注：
作者：xxx
链接：xxx
来源：xxx
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。`
我们使用 copy 事件来实现（这里不对复制多少字数做判断）：
document.addEventListener('copy', e => {
const selection = document.getSelection()
const ct = `作者：lio
链接：https://www.jianshu.com
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。`
e.clipboardData.setData('text/plain', selection.toString() + '\n' + ct)
e.preventDefault()
})
复制这段代码到控制台，试着随意复制一段文本到其他地方。
尝试着，使用其他以上所讲述的任何方法，来修改这个示例，以加深印象。
