JAVASCRIPT複製到剪貼簿

來源：我的部落格

最近答應張先生替42qu寫一個短址服務，寫的過程中學到若干新東西，JS操作剪貼簿便是其中一例。

Javascript本身當然提供了操作剪貼簿的介面，一般長得像
 
 function copyToClipboard(text)
{
     if (window.clipboardData) // IE
     {
         window.clipboardData.setData( "Text" , text);
     }
     else
     {
         unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege( "UniversalXPConnect");
         const clipboardHelper = Components.classes[ "@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
         clipboardHelper.copyString(text);
     }
}

但是，由於各家對於安全這一字眼的認知存在差異，因此，這些既存介面用起來需要勇氣——破罐子破摔的勇氣。

於是，我瀏覽了StackOverFlow上的討論，其中提到的使用flash hack看起來像是目前最完美解決方案，於是，我開始了zeroClipboard探險。由於我在頁面中使用ajax 提交form，用了jQuery的庫，導致若干問題，為此我再次尋找，發現了後來採用的解決方案——zClip。

zClip 結合了zeroClipboard 和 jQuery，滿足我的需要，由於其簡潔的介面設計，應該也滿足大多數人的需要。當然，不得不提的是，其flash依賴導致其存在先天性缺陷，使用請小心。

下面我貼上其官網的使用說明（翻譯）：
 
1.  添加jQuery 和zClip到頁面中：
 
< script type = "text/javascript" src = "js/jquery.js" ></ script >
< script type = "text/javascript" src = "js/jquery.zclip.js" ></ script >
2.  綁定zClip和你用來複製的按鈕（或其他元素）：
$(document).ready( function (){
                     
     $( 'a#copy-description' ).zclip({
         path: 'js/ZeroClipboard.swf' ,
         copy:$( 'p#description' ).text()
     });
                     
     // The link with ID "copy-description" will copy
     // the text of the paragraph with ID "description"
                     
                     
     $( 'a#copy-dynamic' ).zclip({
         path: 'js/ZeroClipboard.swf' ,
         copy: function (){ return $( 'input#dynamic' ).val();}
     });
                     
     // The link with ID "copy-dynamic" will copy the current value
     // of a dynamically changing input with the ID "dynamic"
                     
});
3.  預設複製完成後彈出alert，你可以通過配置beforeCopy 和afterCopy兩個回呼函數來自訂：
$(document).ready( function (){
                   
     $( "a#copy-callbacks" ).zclip({
         path: 'js/ZeroClipboard.swf' ,
         copy:$( '#callback-paragraph' ).text(),
         beforeCopy: function (){
             $( '#callback-paragraph' ).css( 'background' , 'yellow' );
             $( this ).css( 'color' , 'orange' );
         },
         afterCopy: function (){
             $( '#callback-paragraph' ).css( 'background' , 'green' );
             $( this ).css( 'color' , 'purple' );
             $( this ).next( '.check' ).show();
         }
     });
                   
});

4.  可定製參數：

使用注意事項：

1. IE 6, IE 7, IE 8, FF 3.6, Chrome 8, Safari 5, Opera 11 測試通過

2. 對於正式的CSS效果：
    
   /* zClip is a flash overlay, so it must provide */
   /* the target element with "hover" and "active" classes */
   /* to simulate native :hover and :active states. */
   /* Be sure to write your CSS as follows for best results: */
                 
   a:hover, a.hover {...}
   a:active, a.active {...}
   顯示、隱藏、移除zClip：
    
   $( 'a.copy' ).zclip( 'show' ); // enable zClip on the selected element
                
   $( 'a.copy' ).zclip( 'hide' ); // hide zClip on the selected element
                
   $( 'a.copy' ).zclip( 'remove' ); // remove zClip from the selected element
   為了使效果最好，請在頁面的布局固定時綁定zClip到你的元素，雖然有一個函數用以自動調整zClip，但不能保證它不出錯。
    

其他可參考解決方案：

1. 囊括所有方案合集：http://brooknovak.wordpress.com/2009/07/28/accessing-the-system-clipboard-with-javascript/