您的位置：首页 > Web前端 > JavaScript

js实现复制（zclip）

2016-02-26 13:18 525 查看

js实现复制功能，借助zclip插件。

zclip原理

将页面的复制按钮（可以为任意一个控件）绑定zclip，会在该元素上生成一个透明的flash对象，点击该按钮实际是点击了flash对象，将页面上要复制的内容利用flash添加到剪切板中。

遇到的一个问题：本例中的复制按钮是任意移动的，但是flash元素的生成位置只和按钮绑定zclip时的位置一致。后期按钮移动，flash元素并不会跟随移动，这里没有找到好的调用接口。只能每次在移动复制按钮的时候把flash元素跟随着进行移动

$("#zclip-ZeroClipboardMovie_1").css("left",$("#copy_input").offset().left);$("#zclip-ZeroClipboardMovie_1").css("top",$("#copy_input").offset().top);

。

效果

当鼠标位于input上面的时候，在input后面显示复制按钮。

整个页面只有一个复制按钮绑定了zclip。

效果图

代码

引入

jquery.js

和

jquery.zclip.min.js

。

页面html：

<input type="text" id="mytext" style="display:none" value=""/>
<button id="copy_input" class="copy">复制</button>
<span id='msg' style="display:none">复制成功</span>
<input type="text" readonly='readonly' value="1" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="2" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="3" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="4" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="5" onmouseover ="showCopy(this)"/><br/>

复制按钮绑定zclip：

$('#copy_input').zclip({
path: 'ZeroClipboard.swf',
copy: function(){//复制内容
return $('#mytext').val();
},
afterCopy: function(){//复制成功
$("#msg").insertAfter($('#copy_input'));
$("#msg").show();
}
});

input添加鼠标进入事件

function showCopy(obj){
$("#mytext").val($(obj).val());
$("#msg").hide();
$("#copy_input").insertAfter(obj);
$("#copy_input").show();
$("#zclip-ZeroClipboardMovie_1").css("left",$("#copy_input").offset().left);
$("#zclip-ZeroClipboardMovie_1").css("top",$("#copy_input").offset().top);
}

源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通用..</title>
<script type="text/javascript" src="js/jquery/jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.zclip.min.js"></script>
</head>
<body>
<input type="text" id="mytext" style="display:none" value=""/>
<button id="copy_input" class="copy">复制</button>
<span id='msg' style="display:none">复制成功</span>

<input type="text" readonly='readonly' value="1" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="2" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="3" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="4" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="5" onmouseover ="showCopy(this)"/><br/>

<script type="text/javascript">
$(function(){
$('#copy_input').zclip({
path: 'ZeroClipboard.swf',
copy: function(){//复制内容
return $('#mytext').val();
},
afterCopy: function(){//复制成功
$("#msg").insertAfter($('#copy_input'));
$("#msg").show();
}
});
$("#copy_input").hide();
});
function showCopy(obj){
$("#mytext").val($(obj).val());
$("#msg").hide();
$("#copy_input").insertAfter(obj);
$("#copy_input").show();
$("#zclip-ZeroClipboardMovie_1").css("left",$("#copy_input").offset().left);
$("#zclip-ZeroClipboardMovie_1").css("top",$("#copy_input").offset().top);
}
</script>
</body>
</html>

zclip下载

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

标签：

相关文章推荐

新的分享

章节导航