四种实现剪贴板的操作
-
原生
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()
})复制这段代码到控制台，试着随意复制一段文本到其他地方。
尝试着，使用其他以上所讲述的任何方法，来修改这个示例，以加深印象。
更多资料