Clipboard 实现网页复制粘贴

最新推荐文章于 2025-06-08 09:04:57 发布

转载最新推荐文章于 2025-06-08 09:04:57 发布 · 457 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/18y/blog/1525817

文章标签：

#javascript #ViewUI

本文介绍如何使用Clipboard.js实现网页内容的复制功能。针对多个复制按钮的情况，提供了优化方案避免重复实例化的问题，并给出具体实现代码。

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

为什么80%的码农都做不了架构师？>>>

Clipboard.js 实现了纯 JavaScript 无 Flash的浏览器内容复制到系统剪贴板的功能

地址如下 http://www.oschina.net/news/78478/clipboardjs-v-1

操作起来也挺简单，如果是一个页面一个复制按钮相信按照官网教程就能写好

我也写下来吧

<!-- html -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>
// 引进 clipboard
<script src="clipboard.min.js"></script>


// JQ
var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {
   alert('成功');
});

clipboard.on('error', function(e) {
   alert('失败');
});

但是有些时候我们同个页面可能需要几个复制功能，在下在此就遇到点坑了

	<!--html部分-->
	<div class="dizhi-modal zi-modal" style="display: none;">
		<p>地址1</p>
		<p class="copy-dizhi2">我是要复制的内容1</p>
		<a href="#" data-clipboard-action="copy">复制地址1</a>

	</div>

	<div class="dizhi-modal ren-modal" style="display: none;">
		<p>地址2</p>
		<p class="copy-dizhi">我是要复制的内容2</p>
		<a href="#" data-clipboard-action="copy" >复制地址2</a>

	</div>

// JQ 部分
// 这段代码需要两次点击才能触发复制效果，并且多次点击会叠加弹窗
//为两个按钮添加自动绑定事件
$(".zi-modal a,.ren-modal a").on('click',function(){
		var val = $(this).prev().html();
		// alert(val);
		var zidong_ma = new Clipboard(this,{
			 text: function() {
		            return val;
		        }
		});
	    zidong_ma.on('success', function(e) { // 复制成功回调函数
	        console.log(e);
	        alert('已添加至粘贴板。')
	    });

	    zidong_ma.on('error', function(e) { //复制失败回调函数
	        console.log(e);
	        alert('复制失败,请重试。')
	    });
})

造成原因我是这样认为的

每次绑定的时候都会将 Clipboard 重新实例化，然而之前实例化成功的对象并没有销毁，所以这个方式

貌似行不通

然后再看文档 https://clipboardjs.com/

里边的这段

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

说明 Clipboard 默认会将 data-clipboard-text 这个属性的值放到粘贴板

所以我们只需要改变 data-clipboard-text 的值就可以了

所以上面的代码改为

// 点击复制地址，只实例化一次即可 
var ren_ma = new Clipboard('.ren-modal > a'), 
    
//动态变化的是需要复制的值
$('.ren-modal > a').click(function () {
	  var copyText1 = $(this).siblings('.copy-dizhi').text();
	  $(this).attr('data-clipboard-text', copyText1);
	})
	 
ren_ma.on('success', function(e) {
   alert('成功');
});

ren_ma.on('error', function(e) {
   alert('失败');
});

github 上面的似乎太过复杂

附上单个的 js

js 下载地址

转载于:https://my.oschina.net/18y/blog/1525817