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/

發佈留言