JS复制文字

起源

在项目中遇到了点击复制某块文字的需求,经过反复的查询资料解决了这个问题,需要使用一个名为 clipboard.js 的js插件

clipboard.js

概述

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中

clipboard.js支持主流的浏览器:chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;

使用

clipboard复印内容的方式有

  • 从target复印目标内容
  • 通过function 要复印的内容
  • 通过属性返回复印的内容
1 从target复印目标内容

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input id="foo" type="text" value="hello">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

<script>
// button的class的值
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});

clipboard.on('error', function(e) {
console.log(e);
});
</script>

2 通过function 要复印的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<button class="btn">Copy_target</button>
<div>hello</div>

<script>
var clipboard = new Clipboard('.btn', {
// 通过target指定要复印的节点
target: function() {
return document.querySelector('div');
}
});

clipboard.on('success', function(e) {
console.log(e);
});

clipboard.on('error', function(e) {
console.log(e);
});
</script>
3 通过属性返回复印的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
	// 通过id获取复制data-clipboard-text的内容 
<div id="btn" data-clipboard-text="1">
<span>Copy</span>
</div>

<script>
var btn = document.getElementById('btn');
var clipboard = new Clipboard(btn);

clipboard.on('success', function(e) {
console.log(e);
});

clipboard.on('error', function(e) {
console.log(e);
});
</script>