JS实现点击复制功能
1、包含文件
<script src="jquery2.1.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>
2、配置复制按钮组
3、测试时注意:本地绝对路径测试没效果哦~要这样才可以
资源下载页:http://download.csdn.net/detail/qq_16494241/9524979
以下HTML文档代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复制</title>
<script src="jquery2.1.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<style>
*{ margin:0; padding:0;}
li{ width:500px; height:50px; line-height:50px; margin:20px auto; text-align:center; list-style:none; color:#fff; background-color:#3DA5FF; cursor:pointer;}
</style>
</head>
<body>
<ul>
<li id="copyStrTarget1" data-clipboard-target="copyStrTarget_1" class="copyBtn">
复制1 ---> http://11111111111
<input type="hidden" value="http://11111111111" id="copyStrTarget_1"/>
</li>
<li id="copyStrTarget2" data-clipboard-target="copyStrTarget_2" class="copyBtn">
复制2 ---> http://22222222222
<input type="hidden" value="http://22222222222" id="copyStrTarget_2"/>
</li>
<li id="copyStrTarget3" data-clipboard-target="copyStrTarget_3" class="copyBtn">
复制3 ---> http://33333333333
<input type="hidden" value="http://33333333333" id="copyStrTarget_3"/>
</li>
<li id="copyStrTarget4" data-clipboard-target="copyStrTarget_4" class="copyBtn">
复制4 ---> http://44444444444
<input type="hidden" value="http://44444444444" id="copyStrTarget_4"/>
</li>
<li id="copyStrTarget5" data-clipboard-target="copyStrTarget_5" class="copyBtn">
复制5 ---> http://55555555555
<input type="hidden" value="http://55555555555" id="copyStrTarget_5"/>
</li>
</ul>
<script type="text/javascript">
//初始化拷贝
$('.copyBtn').each(function(i,o){
var id=$(o).attr('id');
copyStr(id);
});
//拷贝方法
function copyStr(idStr){
//定义一个新的复制对象
var clip = new ZeroClipboard(
document.getElementById(idStr),{
//配置swf文件的路径
moviePath:'flash/ZeroClipboard.swf'
});
clip.on('complete', function(client, args) {
var copy_str=args.text;
alert('复制链接成功');
});
}
</script>
</body>
</html>