js插件zClip實現復制到剪貼板功能
相信這個功能大家平時上網經常能碰到,以前也沒怎麽留意怎麽實現的,直到項目中需要。
網上一搜一大堆,單純使用js方法也不是沒有,但是由於各瀏覽器的安全機制不同,不是跨瀏覽器的。去看了幾個常用的網站,都是用的透明flash遮擋“復制到剪貼板”按鈕,所以當你點擊“復制到剪貼板”的時候,點擊的其實是flash,然後把你需要復制的內容傳入到了flash,然後在通過flash的復制功能把傳入的內容復制到了剪貼板。
1. 準備工作
準備好jquery,然後去http://www.steamdev.com/zclip/這裏下載jquery.zclip.js和ZeroClipboard.swf ,不過那裏的ZeroClipboard.swf下載地址失效了,你可以去這裏http://pan.baidu.com/share/link?shareid=1286340661&uk=2133883598&fid=2382679931下載,我測試過可以使用。
在html裏加上
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.zclip.js"></script>
2. 編寫代碼
下面是一個小demo,主要是復制文本框中的鏈接到剪貼板。
<input type="text" value="www.baidu.com" id="link">
<span id="copyBtn">復制鏈接</span>
然後加入腳本,非常的簡單。
<script>
$(‘#copyBtn‘).zclip({
path: "ZeroClipboard.swf",
copy: function(){
return $(‘#link‘).val();
}
});
</script>
這裏的path是你flash的路徑,copy是復制成功之後的回調函數。返回的是文本框裏的value值。
另外我們還要對jquery.zclip.js進行設置,用編輯器打開它,就在前面,你會看到如下代碼:
var settings = $.extend({
path: ‘ZeroClipboard.swf‘,
copy: null,
beforeCopy: null,
afterCopy: null,
clickAfter: true,
setHandCursor: true,
setCSSEffects: true
}, params);
同樣修改path為你的flash--ZeroClipboard.swf的路徑,其他的設置我們先不管他。
好了,立馬來測試吧,不過這裏要註意的是,本地測試是不成功的,你要用tomcat或apache在本機搭一個服務器,然後把文件放到服務器目錄下測試。你會看到移到復制鏈接上的時候出現了小手,又見是flash的菜單,如圖所示:
然後點擊它,出現成功提示框。你可以試著在其他地方粘貼,看看有沒有復制成功。
當然你也可以修改復制成功之後的提示框,或者添加更多功能。
在中找到如下代碼。
clip.addEventListener(‘complete‘, function(client, text) {
if ($.isFunction(settings.afterCopy)) {
o.trigger(‘zClip_afterCopy‘);
} else {
if (text.length > 500) {
text = text.substr(0, 500) + "...\n\n(" + (text.length - 500) + " characters not shown)";
}
o.removeClass(‘hover‘);
alert("Copied text to clipboard:\n\n " + text);
}
if (settings.clickAfter) {
o.trigger(‘click‘);
}
});
修改alert那個地方的代碼就可以了,也許還有其他地方也可以修改,我沒有細看。
3. 其他
我們用chrome打開我們的demo,打開控制臺可以看到
沒錯,這正是插件給我們的頁面插入了flash,可以看到它正好蓋住了我們的”復制鏈接“按鈕。
好了,使用插件zClip來實現復制到剪貼板的功能就介紹到這裏了。更多的細節請訪問:http://www.steamdev.com/zclip/
詳細介紹了插件的用法,以及相關參數的設置,包括復制成功之後的函數,怎麽給”復制鏈接“按鈕添加樣式等等。
參考資料:http://www.steamdev.com/zclip/
js插件zClip實現復制到剪貼板功能