公司有个项目最近要优化一下,其中有个业务就是要实现复制功能,并且兼容大多数浏览器,之前的是使用IE的window.clipboardData.setData()方法实现的,判断如果是不是IE则弹出alert()....只能支持IE浏览器,不能做到兼容,而优化项目的时候这个小块是我负责。
没有做过这种功能,听都没听过,就百度、谷歌一起来,最终网上的方法就是有一个欧洲大神封装的一个jQuery插件可以实现复制功能,并且可以兼容浏览器,但必须有服务器服务器和flash,我一想这不就是我要寻求的吗,随之开始深入了解,这个插件使用起来很简单,只需要jQuery文件、ZeroClipboard.swf文件和ZeroClipboard.js文件,在网上轻松可以找到下载的。本文最后也有链接免费下载
1、首先引入jQuery.js和ZeroClipboard.js
<script type="text/javascript" src="<%=basePath%>js/jquery.js"></script>
<script type="text/javascript" src="<%=basePath%>js/ZeroClipboard.js"></script>
ZeroClipboard.swf文件如果和ZeroClipboard.js文件放在一起可以不设置ZeroClipboard.swf文件,会自动加载,但尽量设置一下。
2、在页面上
<body>
<textarea id="testText" cols="30" rows="5" onChange="zeroClipboard.setText(this.value)">复制</textarea>
<div id="containers" style="position:relative">
<div id="clip_button">复制到剪贴板</div>
</div>
</body>
3、在js上
<script type="text/javascript">
var zeroClipboard = null;
$(function() {
ZeroClipboard.setMoviePath("<%=basePath%>js/ZeroClipboard.swf");//设置flash文件路径
zeroClipboard = new ZeroClipboard.Client();
zeroClipboard.setHandCursor( true );//变成手型
zeroClipboard.addEventListener("load", function (client) {//监听事件,当全部load加载完毕F12会提示
console.log("Flash文件加载完毕。");
});
zeroClipboard.addEventListener("mouseOver", function (client) {//修改会执行zeroClipboard的复制方法
zeroClipboard.setText( $("#content").val() );
});
zeroClipboard.addEventListener("complete", function (client, text) {//复制完成会alert提示
alert("复制成功" + text );
});
zeroClipboard.glue( "clip_button", "containers" );
});
</script>
在步骤3中
zeroClipboard.glue( "clip_button", "containers" );
可以设置为
zeroClipboard.glue( "clip_button");
这样简单一些,但可能会造成定位不准确的问题,会复制失败,没有反应。而在步骤2中
style="position:relative"
当设置为zeroClipboard.glue( "clip_button");
时为了保证定位准确可以这样来保证定位准确,这个好像是进行相对位置布局。
在其他页面上知道的:
flash的相对浮动
这里还提供了一种更巧妙的方式:如果按钮的上层有任何position:relative的块状元素,比如div,而按钮和这个块状元素的位置又是相对固定的,那么可以在调用glue函数时,将这个div的id作为第二个参数传进去,不过同时reposition这个api就失效了。比如:
clip.glue( ‘clip-button-id’, ‘clip-container-id’ );
基本上以上可以复制一下,就是一个可以用的Hello word了。
下面是两个文件下载地址,可以提供免费下载
jQuery1.9.1:http://download.csdn.net/detail/p_doraemon/9909182
zeroClipboard所需的两个文件:
http://download.csdn.net/detail/p_doraemon/9909186