Clipboard -- 剪贴板操作

四种实现剪贴板的操作

• 原生​​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()
})

复制这段代码到控制台，试着随意复制一段文本到其他地方。

尝试着，使用其他以上所讲述的任何方法，来修改这个示例，以加深印象。