ZeroClipboard
1.
引用js
|
1
|
<script type="text/javascript" src="/ZeroClipboard.js"></script>
|
2．Html
|
1
2
3
4
5
6
7
|
<input id="fe_text" cols="50" rows="5" value="复制内容文本2" />
<button id="btnCopy">复制</button>
<input id="fe_text2" cols="50" rows="5" value="复制内容文本20" />
<button id="btnCopy2">复制</button>
|
由于在页面上需要复制两个文本框，这里便设置了两个文本框，两个复制按钮为例
3.JS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
function init(txtid, btnid) {
//设置flash路径：就算和js在同一路径下，也推荐设置
ZeroClipboard.setMoviePath('/js/zeroclipboard/ZeroClipboard.swf');
//1.实例化ZeroClipboard
var clip = new ZeroClipboard.Client();
//2.设置手型模式---其实就是放在元素上，变成小手的样子
clip.setHandCursor(true);
//3.设置监听事件，复制文本框中内容
clip.addEventListener('mouseOver', function (client) {
clip.setText($('#' + txtid).val());
});
//4.设置复制完成时触发事件--提示完成
clip.addEventListener('complete', function (client, text) {
alertSuccess((txtid == 'URL2' ? "url复制成功" : "token复制成功") + "，请在公众号中做相应设置");
});
//5.绑定按钮
clip.glue(btnid);
} |
在页面加载完成后调用：
|
1
2
3
|
init('fe_text', 'btnCopy');
init('fe_text2', 'btnCopy2');
|