php 剪贴板,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, 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，但不能保证它不出错。

其他可参考解决方案：