jquery+flash(zclip)實現點擊複製到剪切板

jQuery-zclip是一個複製內容到剪貼板的jQuery插件,使用它咱們不用考慮不一樣瀏覽器和瀏覽器版本之間的兼容問題。jQuery-zclip插件須要Flash的支持,使用時記得電腦安裝Adobe Flash Player。javascript

加載jQuery和zClip,地址請根據各自的存放地址作相應修改。java

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>

js實現點擊複製的代碼(本地測試沒法使用,上傳到服務器測試)jquery

$(function(){
    $('#copy_input').zclip({
        path: 'js/ZeroClipboard.swf',
        copy: function(){ //複製內容
            return $('#mytext').val();
        },
        afterCopy: function(){ //複製成功
            $("<span id='msg'/>").insertAfter($('#copy_input')).text('複製成功');
        }
    });
});

須要注意若是是複製的內容來自輸入框input、textarea等,copy對象使用:瀏覽器

copy: function(){
    return $('#mytext').val();
}

若是是複製的內容來自頁面元素div、p之類的,copy對象使用:服務器

copy: $('#mytext').text();

配置說明

path:swf的路徑(複製主要是用flash解決不一樣瀏覽器的複製)
copy:待複製的內容, 能夠是靜態內容, 也能夠 return 動態內容
beforeCopy:複製以前要作的function;
afterCopy:複製以後要作的function;

提供了3個方法ide

show:$(selected).zclip('show'); //複製功能有效
hide:$(selected).zclip('hide'); //複製功能無效
remove:$(selected).zclip('remove'); //徹底移除複製功能

運行成功後,點擊複製按鈕,會彈出一個提示框,表示複製到剪切板生效了。測試

彈出框出現「Copied text to clipboard」英文字符,有點不符國人使用習慣,把它改成「成功複製到剪切板」,在jquery.zclip.min.js文件中找到「Copied text to clipboard」替換成「成功複製到剪切板」就能夠了。spa

更多詳情請參考 http://www.steamdev.com/zclip/插件

聲明:本文采用 BY-NC-SA 協議進行受權,轉載還請註明:jquery+flash(zclip)實現點擊複製到剪切板code

相關文章
相關標籤/搜索