HTML实现复制功能

最新推荐文章于 2024-05-20 20:00:00 发布

Share，Keep Life ^_^

最新推荐文章于 2024-05-20 20:00:00 发布

阅读量9.8k

点赞数 1

分类专栏： HTML 文章标签： HTML clipboard CSS 复制点击复制

本文链接：https://blog.csdn.net/weixin_44306005/article/details/97901135

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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的版本号：

2.0.4对应上面的对clipboard.js进行实例化的代码new ClipboardJS，版本为1.7.1之类的实例化时使用new Clipboard。（注：此处为小编个人理解，如有不对，请多指教。）

Share，Keep Life ^_^

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML实现复制功能

1.CSS实现复制功能body { unselectable: all; -moz-user-select: all; onselectstart: all; -webkit-user-select: all;}给body设置这四个属性，就可以右键进行复制了。2.使用clipboard.js进行复制js文件下载地址：https://clipboardjs.com/单...
复制链接

扫一扫