zeroclipboard浏览器复制插件使用记录
生活随笔
收集整理的這篇文章主要介紹了
zeroclipboard浏览器复制插件使用记录
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一個簡單例子:
<html><body><button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button><script src="~/Scripts/jquery-1.7.1.js"></script><script src="~/Scripts/ZeroClipboard.js"></script></body><script>var client = new ZeroClipboard( $("#copy-button") );client.on('ready', function (event) {client.on('copy', function (event) {event.clipboardData.setData('text/plain', event.target.innerHTML);alert("復(fù)制成功");});client.on('aftercopy', function (event) {//復(fù)制之后的操作,如果不是自動在本頁面粘貼,請把此事件備注掉console.log('Copied text to clipboard: ' + event.data['text/plain']);});});client.on('error', function (event) {//出錯的時候該干嘛// console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );ZeroClipboard.destroy();});</script> </html>
2.2版本需要引用jquery,要習(xí)慣把js代碼寫到頁面底部,經(jīng)測試,發(fā)現(xiàn)此代碼不支持IE10/11,以下提供兼容IE的function,替換js部分即可
?
?
<script>$(function() {var text="取文本";var msg="復(fù)制成功";clipboard("btn_copy",text,msg);});//參數(shù)說明//button:按鈕id//text:要復(fù)制的文本//msg:復(fù)制成功提示文本function clipboard(button,text,msg) {if (window.clipboardData) { //for ievar copyBtn = document.getElementById(button);copyBtn.onclick = function () {window.clipboardData.setData('text', text);alert(msg);}} else {var client = new ZeroClipboard($("#" + button));client.on('ready', function (event) {client.on('copy', function (event) {event.clipboardData.setData("text/plain", text);alert(msg);});});client.on('error', function (event) {ZeroClipboard.destroy();});}return false;}</script>?
最后,需要注意的是不要在本地調(diào)度,你會發(fā)現(xiàn)不會生效,因為Flash的安全限制 擴(kuò)展閱讀:http://www.365mini.com/page/zeroclipboard-2_x-quick-start.htm zeroclipboard源碼:https://github.com/zeroclipboard/zeroclipboard zeroclipboard官網(wǎng):zeroclipboard.org
?
轉(zhuǎn)載于:https://www.cnblogs.com/shensigzs/p/5321479.html
總結(jié)
以上是生活随笔為你收集整理的zeroclipboard浏览器复制插件使用记录的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 快速排序以及基于快排思想的找前k个最大数
- 下一篇: HTML5新增标签的汇总与详解