您的位置：首页 > 其它

[置顶] ZeroClipboard实现复制功能，做到浏览器兼容

2017-07-24 21:31 561 查看

公司有个项目最近要优化一下，其中有个业务就是要实现复制功能，并且兼容大多数浏览器，之前的是使用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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航