總結ZeroClipboard實現複製貼上功能

zeroclipboard是通過flash+js實現複製到剪下板功能，瀏覽器相容性好。工作原理大概是：在「複製」按鈕上遮罩乙個透明的flash，flash被點選後，會呼叫其的剪下板處理功能，完成對文字內容的複製。

實現步驟：建立乙個flash->讓其漂浮在「複製」按鈕上->監聽flash的點選事件->點選後將文字內容存到剪下板。

建立flash：

zeroclipboard.setmoviepath("js/zeroclipboard/zeroclipboard.swf");//注意把位址改成自己專案中的實際位址

var clip = new zeroclipboard.client();

讓flash漂浮在「複製」按鈕之上：

clip.glue('d_clip_button'); //'d_clip_button'為按鈕id

clip.reposition()可以用來處理當頁面大小發生變化時，flash可能會錯位而導致點選不到，它可以重新復位 flash到複製按鈕之上，可以將它繫結到window的resize事件上。

如果複製按鈕的上層有position:relative的塊級元素，如div，並且複製按鈕和這個塊級元素的位置是相對固定的，則可以在呼叫glue函式時，將這個塊級元素的id作為glue的第二個引數，此時reposition就失效了。這也是zeroclipboard的示例中的實現方式：clip.glue('d_clip_button', 'd_clip_container');

clip.sethandcursor( true ); // 設定滑鼠移到複製按鈕上為手型

clip.settext("複製內容"); // 設定要複製的文字內容

clip.setcsseffects( true );//解決flash遮擋導致按鈕像 css 「:hover」, 「:active」等偽類可能會失效的問題。

zeroclipboard事件：

load flash載入完成事件

mouseover 滑鼠劃入事件

mouseout 滑鼠劃出事件

mousedown 滑鼠按下事件

mouseup 滑鼠鬆開事件

complete 複製成功事件

廢話不說了，直接上實現**：

view code

1$(function
() );45
function
init(btnid, containerid,textid) );
1617 clip.addeventlistener('complete', function
(client, text) );
2122
clip.glue(btnid, containerid);
23 }

zeroclipboard的示例**中監聽的是mouseover事件，但是我在測試中發現有的時候複製沒有成功，所以我改成了mousedown事件後就好，這個不知道是神馬問題？？？

還有就是在complete事件中用alert提示複製成功的話，那麼給按鈕設定樣式會出問題，提示後在ie和ff下按鈕呈現的是hover的樣式，需要滑鼠劃入劃出一次後恢復。經測試在ie下可以通過jquery ui的dialog等代替alert解決，但是ff下解決不了，通過js移除hover樣式也不行。如果不提示複製成功則不會出現這種問題，這個也不知道是神馬問題？？？

以上2個問題期待大神解答，望大神不吝賜教，thks。

總結ZeroClipboard實現複製貼上功能

使用ZeroClipboard複製

總結之總結

總結 C 總結！！！

總結ZeroClipboard實現複製貼上功能

使用ZeroClipboard複製

總結之總結

總結 C 總結！！！

相關推薦