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

来自为知笔记(Wiz)