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. 可定制参数：

使用注意事项：

IE 6, IE 7, IE 8, FF 3.6, Chrome 8, Safar
```
补充：web前端 , JavaScript ,
```