前端通过js将文本复制到剪切板上.使用clipboard.js

会飞的哈士奇

已于 2022-09-27 12:02:05 修改

阅读量463

点赞数

分类专栏： java 文章标签：前端 javascript 开发语言

于 2022-09-27 11:43:03 首次发布

本文链接：https://blog.csdn.net/dongyan3595/article/details/127068677

版权

java 专栏收录该内容

58 篇文章 2 订阅

订阅专栏

下载地址 : https://download.csdn.net/download/dongyan3595/86723306

详细请参考 : clipboard.js基本使用_xiaobaixiaye的博客-CSDN博客_clipboard.js

将需要复制的文字放到 data-clipboard-text 上 , 调用方法就可以复制了

<!doctype html>
<html lang="en" >
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body id="pageArea" class="list">
    <button type="button" id="copyText" data-clipboard-text="这是需要复制的文本" onclick="copyText();">复制文本</button>
	<button type="button" id="copyText2" onclick="copyText2();">复制文本</button>
<script src="jquery.min.js"></script>
<script src="clipboard.min.js"></script>
<script>
	// 无法复制display:none的节点 , 可以设置为opacity:0
	
	// 数据源固定
	function copyText() {
		var clipboard = new Clipboard('#copyText');
		clipboard.on('success', function(e) {
			alert("已复制到剪切板")
			console.info('Text:', e.text);
			e.clearSelection();
		});
		clipboard.on('error', function(e) {
			alert("复制失败");
		});
	}

	
	// 数据源不固定
	function copyText2() {
		var clipboard = new Clipboard('#copyText', {
			text: function(trigger) {
				return "动态的文字";
			}
		});
		clipboard.on('success', function(e) {
			alert("已复制到剪切板")
			console.info('Text:', e.text);
			e.clearSelection();
		});
		clipboard.on('error', function(e) {
			alert("复制失败");
		});
	}

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