JS实现点击复制功能（ZeroClipboard）

最新推荐文章于 2024-03-20 17:36:57 发布

羽筠

最新推荐文章于 2024-03-20 17:36:57 发布

阅读量6.5k

点赞数

分类专栏： JS HTML + CSS + JS

本文链接：https://blog.csdn.net/qq_16494241/article/details/51451849

版权

JS 同时被 2 个专栏收录

72 篇文章 0 订阅

订阅专栏

HTML + CSS + JS

39 篇文章 1 订阅

订阅专栏

JS实现点击复制功能

1、包含文件

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>

羽筠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS实现点击复制功能（ZeroClipboard）

JS实现点击复制功能1、包含文件2、配置复制按钮组3、测试时注意：本地绝对路径测试没效果哦~要这样才可以以下HTML文档代码：复制*{ margin:0; padding:0;}li{ width:500px; height:50px; line-height:50px; margin:20px auto; text
复制链接

扫一扫