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