使用clipboard.js的一个简单实例（循环解决方案）

最新推荐文章于 2025-06-11 11:41:59 发布

原创最新推荐文章于 2025-06-11 11:41:59 发布 · 742 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

收录于

javascript 同时被 2 个专栏收录

79 篇文章

订阅专栏

工具

16 篇文章

订阅专栏

本文介绍如何利用CDN引入clipboard.js库，并通过简单的HTML与JavaScript代码实现网页中文字的一键复制功能，包括按钮点击事件监听及复制成功的反馈。

点击按钮复制,CDN引入clipboard

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/clipboard.js"></script>
		<title>实现复制文字</title>
	</head>
	<body>
		<div id="txt">
				hello，我是要被复制的文字
		</div>
		<button data-clipboard-target="#txt" class="btn"> 
			点击 复制
		</button>
		
		<script type="text/javascript">
			var clipboard = new ClipboardJS('.btn'); 
			clipboard.on('success', function(e) {
		// 成功时
		    console.info('Action:', e.action);
		    console.info('Text:', e.text);
		    console.info('Trigger:', e.trigger);
		    e.clearSelection();
		    	alert("复制成功");
		});

		</script>
	</body>
</html>