ZeroClipboard支持IE,firefox,Chrome复制到剪贴板

作者 FarLee 2010年6月20日 16:44:45   ‖浏览(91,715)

在说到ZeroClipboard之前,先说说为何会用到ZeroClipboard。有时候需要在触发某JavaScript事件的同时,将某段文本复制到剪贴板。比如直接通过点击某复制按钮,将textarea中的内容复制到剪贴板,就不用先全选内容,再Ctrl+C了。另外如果在复制的同时,要记录这段文本被复制使用的次数,一般的方法是可以使用js脚本代码,在执行复制之后,执行form submit,提交一次则该文本被使用的次数计数器加1。

若不考虑浏览器的兼容性,只要支持IE浏览器,则可以使用IE浏览器支持的window.clipboardData对象(js dom对象)的setData方法,如window.clipboardData.setData (“Text”,txt); 不过该window对象实现复制到剪贴板并不支持Firefox浏览器,当然更不支持Google Chrome浏览器。针对兼容火狐Firefox浏览器的js代码,可以用类似下面的这段JavaScript脚本实现复制。

<script type="text/javascript">
function copyCode(id){
var testCode=document.getElementById(id).value;
if(copy2Clipboard(testCode)!=false){
document.form1.submit();           //复制成功后提交表单,记录复制到剪贴板的使用次数
}
}
copy2Clipboard=function(txt){
if(window.clipboardData){         //判断是否是IE浏览器
window.clipboardData.clearData();
window.clipboardData.setData("Text",txt);
}
//else if(navigator.userAgent.indexOf("Opera")!=-1){
//    window.location=txt;
// }
else if(window.netscape){   //Firefox浏览器
try{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}
catch(e){
alert("您的firefox安全限制限制您进行剪贴板操作,请打开’about:config’将signed.applets.codebase_principal_support’设置为true’之后重试,相对路径为firefox根目录/greprefs/all.js");
return false;
}
var clip=Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if(!clip)return;
var trans=Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if(!trans)return;
trans.addDataFlavor('text/unicode');
var str=new Object();
var len=new Object();
var str=Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
var copytext=txt;str.data=copytext;
trans.setTransferData("text/unicode",str,copytext.length*2);
var clipid=Components.interfaces.nsIClipboard;
if(!clip)return false;
clip.setData(trans,null,clipid.kGlobalClipboard);
}
}
</script>

HTML代码:

<form action="copy.php" method="post" id="form1" name="form1" target="updateself">

<input type="button" name="title" onclick="copyCode('copyid');" value="【点击复制】" width="100px" height="23">

<textarea id="copyid"><?php echo $content; ?></textarea>

上面的JavaScript针对使用最多的两大主流浏览器:IE(IE6,IE7,IE8)和Firefox都可以实现复制到剪贴板功能。但是这段js脚本代码对使用用户群体越来越高的Google Chrome浏览器仍无法兼容。

这时候ZeroClipboard就派上用场了。ZeroClipboard使用一段隐藏的Adobe Flash 视频和JavaScript接口,简单实现复制文本到剪贴板的功能。只要用户的浏览器安装了adobe flash,就可以使用,adobe flash的安装率很高,同时兼容最新的adobe flash player 10。剪贴板复制操作由falsh里的一个用户点击事件触发。最新发布的版本是Zero Clipboard 1.0.7,下载Zero Clipboard

Zero Clipboard下载完毕之后,在解压的文件夹中复制 ZeroClipboard.js 和 ZeroClipboard.swf 到网站目录中,若要启用支持adobe flash 10的Rich Html 属性,则还要将ZeroClipboard10.swf也复制过来。最好将它们放在和使用该js的html代码同一级的目录中,否则需要设置指明ZeroClipboard.swf 所在的目录路径。Zero Clipboard使用如下实例:

CSS:

<style type="text/css">
#d_clip_button {
width:150px;
text-align:center;
border:1px solid black;
background-color:#ccc;
margin:10px; padding:10px;
}
#d_clip_button.hover{ background-color:#eee; }
#d_clip_button.active{ background-color:#aaa; }
</style>

copy.php:

<script type="text/javascript" src="/js/zero/ZeroClipboard.js"></script>

<div id="d_clip_button">【点击复制】</div>

<textarea rows=2 id="copyid"><?php echo $content; ?></textarea>

<script language="JavaScript">
ZeroClipboard.setMoviePath( '/js/zero/ZeroClipboard.swf' );  //和copy.php不在同一目录需设置setMoviePath
ZeroClipboard.setMoviePath( '/js/zero/ZeroClipboard10.swf' );
var clip = new ZeroClipboard.Client();   //创建新的Zero Clipboard对象
clip.setText( '' ); // will be set later on mouseDown   //清空剪贴板
clip.setHandCursor( true );      //设置鼠标移到复制框时的形状
clip.setCSSEffects( true );          //启用css
clip.addEventListener( 'load', function(client) {
// alert( "movie is loaded" );
} );
clip.addEventListener( 'complete', function(client, text) {     //复制完成后的监听事件

// alert("Copied text to clipboard: " + text );

document.form1.submit();           // 复制到剪贴板成功后提交表单
clip.hide();                                          // 复制一次后,hide()使复制按钮失效,防止重复计算使用次数
} );
clip.addEventListener( 'mouseOver', function(client) {
// alert("mouse over");
} );
clip.addEventListener( 'mouseOut', function(client) {
// alert("mouse out");
} );
clip.addEventListener( 'mouseDown', function(client) {
// set text to copy here
clip.setText( document.getElementById('copyid').value );
// alert("mouse down");
} );
clip.addEventListener( 'mouseUp', function(client) {
// alert("mouse up");
} );
clip.glue( 'd_clip_button' );
</script>

Zero Clipboard 使用实例的说明在上面已经注明,Zero Clipboard使用起来还是比较简单的,使用过程中注意次序,ZeroClipboard.js->HTML代码–>创建ZeroClipboard对象的JavaScript代码–>…–>clip.glue(),尤其是一个页面上需要创建多个ZeroClipboard复制到剪贴板对象时。

在IE7.0中,最后的这段JavaScript代码不宜放在表格table,td等标签中。在Firefox浏览器中,拉动滚动条至隐藏Zero Clipboard的复制框后,需双击才能复制成功。在Google Chrome浏览器中,当前的测试完全兼容。为了有利于保护安全性,Internet explorer会限制网页运行可以访问计算机的脚本和ActiveX控件,因此Zero Clipboard在本地磁盘上测试无法使用,必须在网络上测试,如http://localhost…


“ZeroClipboard支持IE,firefox,Chrome复制到剪贴板”文章评论(22)

  1. 百度存知己. 网络若比邻.

    虽隔千万里. 时刻心连心.

    高兴报报喜. 心烦觅知音.

    互相多勉励. 事业有雄心.

    经常见一面. 心平气又稳.

    有空踩脚印. 没空留个影.

    网友千千万. 回想个个亲.

  2. 学习了,不错的方法~

  3. 额~都只是说了绑定ID的,若页面中个数位置的CLASS怎么办

  4. 找到解决方案了,谢谢!

  5. 浏览器兼容害死人,最后还要通过Flash解决…

  6. zeroclipboard无法处理textarea中的换行,请问有神马好办法解决
    现在复制到剪贴板的内容不带换行,很纠结

  7. This a very good forum

  8. Cnc is a good compliment to forging.CNC machining is the cutting or removing of material by a computer-aided machine tool. A CNC machining center works with metal, wood, plastic or other manufacturing materials. CNC machining is replacing older, pre-computer machining technology in machine shops around the country.

    CNC machining is performed with a type of device which utilizes computer software to design a path which a cutting mechanism will adhere to creating a uniform product which may be mass produced with ease. This is an incredibly useful system which allows companies to produce bulk orders at cut rate prices as the actual labor gone into each piece has been replaced by the cutting equipment.

    The decision to upgrade to CNC machining can be hard for a shop owner, but the benefits make the initial costs and the learning curve for new technology well worth it. Customers demand closer tolerances, faster deliveries and lower prices, all of which upgrading to a CNC shop makes possible.

    From cnccnc, post Cnc is a good compliment to forging

  9. DrNicytymn

    [b]purchase allegra-d[/b]

  10. gxfljjn8853mk

    – – – –

  11. akrajdg4252os

    – – – –

  12. fumsgev8309wz

    – – – –

  13. fquxapr8813fn

    – – – –

    • debio July 3, 2007 A pony? In Dulwich? What would you do with all the poo? Mobile recycling ma2i&nesh#8c30;I jest, of course. No contest – much greater fun than a bicycle anyday!

  14. Neskgancene

    Dell XPS 17

  15. andreybest

  16. vsem bojtsa deduchku

  17. ClaytonTon

    Can somebody help me with a minor issue.
    A split yr in the past, I got identified as having a candida albicans
    I want to look at some diet against Candida albicans.
    Online, a lot of information about this issue.
    But experiences commonly diverge. And I failed to find the appropriate conclusion for myself personally.
    Probably the forum participants will recommend a successful diet or perhaps several tested recipes against candida?
    I will be really many thanks for any assistance

    Thanks a lot!

Trackbacks/Pingbacks

  1. ZeroClipboard支持IE,firefox,Chrome复制到剪贴板 | 75号工坊
  2. 请问如何在CHROME下用JS访问剪贴板 - 开发者问答
  3. js 复制内容到剪贴板 需要在遨游下可用 - 开发者问答
  4. js 复制内容到剪贴板 需要在遨游下可用 - javascript - 开发者

来说兩句