HTML实现复制功能

最新推荐文章于 2025-07-15 12:59:02 发布

原创最新推荐文章于 2025-07-15 12:59:02 发布 · 1w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #clipboard #CSS #复制 #点击复制

HTML 专栏收录该内容

11 篇文章

订阅专栏

1.CSS实现复制功能

body {
	unselectable: all;
	-moz-user-select: all;
	onselectstart: all;
	-webkit-user-select: all;
}

给body设置这四个属性，就可以右键进行复制了。

2.使用clipboard.js进行复制

js文件下载地址：https://clipboardjs.com/

单个复制的写法(可以直接复制粘贴使用)：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制粘贴</title>
</head>
<body>
	<a href="javascript:void(0);" id="rcopy" onclick="copy('a','b')">点我复制</a>
	<script src="../lib/clipboard.js"></script>
	<script src="../lib/jquery-2.1.4.js"></script>
	<script type="text/javascript">
	function copy(a,b) {
		var clipboard = new ClipboardJS('#rcopy', {
			text : function() {
				return a + '-' + b;
			}
		});
		clipboard.on("success", function(e) {
			console.log(e);
			alert(e.text+'复制成功');
			clipboard.destroy();
		});

		clipboard.on("error", function(e) {
			console.log(e);
			alert('复制失败');
			clipboard.destroy();
		});
	}
	</script>
</body>
</html>

对ajax请求回来的数据动态的对单个数据进行复制(不可直接复制粘贴使用)：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制粘贴</title>
</head>
<body>
	<script src="../lib/clipboard.js"></script>
	<script src="../lib/jquery-2.1.4.js"></script>
	<script type="text/javascript">
	//此处的html为ajax请求之后向页面添加元素
	var html= '<a href="javascript:void(0);" id="rcopy'+r[i][1]+r[i][2]+'" onclick="copy(\''+r[i][1]+'\',\''+r[i][2]+'\')"></a>';	
	function copy(a,b) {
		var clipboard = new ClipboardJS('#rcopy' + a + b, {
			text : function() {
				return a + '-' + b;
			}
		});
		clipboard.on("success", function(e) {
			console.log(e);
			alert(e.text+'复制成功');
			clipboard.destroy();
		});

		clipboard.on("error", function(e) {
			console.log(e);
			alert('复制失败');
			clipboard.destroy();
		});
	}
	</script>
</body>
</html>

如果使用clipboard.js过程中出现：Clipboard is not defined这样的报错，看下引用的clipboard.js的版本号：