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

最新推荐文章于 2025-06-19 18:09:42 发布

羽筠

最新推荐文章于 2025-06-19 18:09:42 发布

阅读量6.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS HTML + CSS + JS

本文链接：https://blog.youkuaiyun.com/qq_16494241/article/details/51451849

JS 同时被 2 个专栏收录

72 篇文章

订阅专栏

HTML + CSS + JS

41 篇文章

订阅专栏

本文介绍如何使用JavaScript结合ZeroClipboard库实现网页上的复制功能。通过简单的HTML结构和jQuery库，可以轻松创建可复制文本的按钮，并在点击时将指定的内容复制到用户的剪贴板上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS实现点击复制功能

1、包含文件

2、配置复制按钮组

3、测试时注意：本地绝对路径测试没效果哦~要这样才可以

资源下载页：http://download.youkuaiyun.com/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>