JavaScript实现复制功能

 

 

先不考虑浏览器的兼容性，看看各浏览器对复制功能的支持情况：

1、IE浏览器，解决方法有三种，代码如下：

[javascript]

function copy(txtid){  

    var txtObj = document.getElementById(txtid);  

    if(window.clipboardData){ // 仅IE支持此对象，firefox、chrome不支持   

        //1、通过clipboardData对象实现复制   

        //window.clipboardData.clearData();   

        //window.clipboardData.setData("Text",txtObj.value);   

          

        //2、通过document对象实现复制:先选择中文本，再执行复制命令   

        //txtObj.select();   

        //document.execCommand("Copy"); // 仅IE支持，Firefox报语法错误，chrome执行结果返回false(不支持)   

          

        //3、通过TextRange对象实现现复制：可以不用先选中内容   

        txtObj.createTextRange().execCommand("Copy");  

    }  

}  

 

function copy(txtid){

var txtObj = document.getElementById(txtid);

if(window.clipboardData){ // 仅IE支持此对象，firefox、chrome不支持

//1、通过clipboardData对象实现复制

//window.clipboardData.clearData();

//window.clipboardData.setData("Text",txtObj.value);

 

//2、通过document对象实现复制:先选择中文本，再执行复制命令

//txtObj.select();

//document.execCommand("Copy"); // 仅IE支持，Firefox报语法错误，chrome执行结果返回false(不支持)

 

//3、通过TextRange对象实现现复制：可以不用先选中内容

txtObj.createTextRange().execCommand("Copy");

}

}

 

2、Firefox，通过接口的方法实现，火狐是出于安全原因，在17之后版本关闭此接口，17及之前版本可用。代码如下:

[javascript]

var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard);  

 

var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard);3、Chrome出于安全，未向用户提供对剪贴板的操作。由此可见，各浏览器对复制功能的支持并不统一。

 

 

Zero Clipboard库

jhuckaby写的Zero Clipboard的js类库，利用Flash完成复制内容到剪贴板。只要浏览器装有Flash插件就可以复制内容，通过ActionScript屏蔽了JavaScript的不足，解决浏览器间复制兼容性问题。

 

 

Zero Clipboard的实现原理：Zero Clipboard首先生成Flash对象标签，让透明的Flash漂浮在复制按钮之上，其实点击的不是按钮而是Flash，这样将需要的内容传入Flash，再通过Flash的复制到系统剪贴板。

 

 

Zero Clipboard的使用方法

 

注意：由于是基于Flash实现，Flash出于安全，需要在Web容器（例如Apache、Tomcat）中才能运行，直接打开Flash将不会被加载，按钮类似假死现象，网上说右键Flash设置将ZeroClipboard.swf添加到受信任位置，感觉应该是行的，我试了，仍然不行，也可能是我本地浏览器的问题。

 

1>下载Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js和ZeroClipboard.swf放入到你的项目中;

 

2>引入Zero Clipboard.js文件，如下代码：;

 

    注意：ZeroClipboard.js与ZeroClipboard.swf需要放在同一路径下，如果不在同一路径，可使用ZeroClipboard.setMoviePath()来设置。

 

3>简单复制代码如下：

 

 

[javascript] 

var clip = new ZeroClipboard.Client();  // 新建一个clip对象   

clip.setHandCursor( true );                 // 设置鼠标为手型   

clip.setText("hello,world");                  // 设置要复制的文本，可以为文本框的值   

clip.glue("copy-botton");  // 为clip注册一个按钮，参数为按钮元素的id，点击按钮就可以实现复制  

 

var clip = new ZeroClipboard.Client();  // 新建一个clip对象

clip.setHandCursor( true );                 // 设置鼠标为手型

clip.setText("hello,world");                  // 设置要复制的文本，可以为文本框的值

clip.glue("copy-botton");  // 为clip注册一个按钮，参数为按钮元素的id，点击按钮就可以实现复制

4>Zero Clipboard常用方法，建议直接查看源码：

 

    reposition()：防止当页面大小发生变化时，Flash按钮可能会错位问题

 

    hide()  ：隐藏Flash按钮

 

    show()    ：显示Flash按钮

 

    setCSSEffects()：解决Flash遮挡按钮样式失效问题(将:hover修改为.hover)。

 

5>Zero Clipboard 常用事件，事件处理函数为addEventListener()：

 

    load ：Flash按钮加载完事件

    mouseOver：鼠标移上事件

    mouseOut： 鼠标移出事件

    mouseDown：鼠标按下事件

    mouseUp：鼠标松开事件

    complete：复制成功事件

 

 

 

jquery.zclip库

 

由于ZeroClipboard是基于原生JavaScript实现，jquery.zclip使用jQuery对Zero Clipboard进行封装，如果项目中已经使用jQuery，建议使用它，jquery.zclip体积较小。