ZeroClipBoard 复制粘贴插件

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');






posted @ 2015-05-08 15:25  寒冰丿  阅读(215)  评论(0)    收藏  举报