JAVASCRIPT复制到剪贴板

来源：互联网发布：集美大学网络怎么开编辑：程序博客网时间：2024/04/27 20:50

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, Safari 5, Opera 11 测试通过
对于正式的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，但不能保证它不出错。

其他可参考解决方案：

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