移动端js复制内容到剪贴板

clipboard.js是一个没有Flash。没有框架。只需3kb gzipped,实现了将文本复制到剪贴板。兼容性做得好,不兼容的话clipboard.js会优雅地降级,会自动选中文本,用户可以自己选择复制。

兼容性

Chrome logo Edge logo Firefox logo Internet Explorer logo Opera logo Safari logo
42+ ✔ 12+ ✔ 41+ ✔ 9+ ✔ 29+ ✔ 10+ ✔

安装

1
npm install clipboard --save

或者可以用cdn地址

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
从属性复制文本
<button class="btn" data-clipboard-text="http://blog.langpz.com">
复制
</button>

从另一个元素复制文本
<input id="foo" value="https://github.com/lanpangzhi">

<button class="btn" data-clipboard-target="#foo">
复制
</button>

从另一个元素剪切文本
<input id="xxx" value="https://api.langpz.com">

<button class="btn" data-clipboard-action="cut" data-clipboard-target="#xxx">
复制
</button>

<script>
new ClipboardJS('.btn') // 传入dom节点实例化ClipboardJS
</script>
  • data-clipboard-text: 需要复制的内容
  • data-clipboard-target: 需要复制内容的选择器
  • data-clipboard-action: 默认copy, 复制的动作,仅适用于input或textarea元素
    demo地址

clipboard 还可以绑定success 和 error 事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<button class="btn" data-clipboard-text="http://blog.langpz.com">
复制
</button>

<script>
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);
});
</script>

  • e.action: 复制的动作
  • e.text: 复制的内容
  • e.trigger: 触发的dom
    demo地址

clipboard 还有一些高级用法,建议去官网查看。

参考

https://clipboardjs.com/