js实现的复制内容到剪贴板

最新推荐文章于 2024-06-20 14:03:32 发布

canlynet

最新推荐文章于 2024-06-20 14:03:32 发布

阅读量101

点赞数

分类专栏： web Javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/canlynet/article/details/84806604

版权

web 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

Javascript

18 篇文章 0 订阅

订阅专栏

clipboard.js 实现了纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS实现的点击复制到剪贴板</title>
	<script src="clipboard.min.js"></script>
</head>
<body>
	<textarea id="content">clipboard.js 实现了纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+</textarea>
	<button class="btn" data-clipboard-action="copy" data-clipboard-target="#content">复制到剪贴板</button>
	
	<script type="text/javascript">
	var clipboard = new Clipboard('.btn');
	clipboard.on('success', function(e) {
	    console.info('Action:', e.action);
	    console.info('Text:', e.text);
	    console.info('Trigger:', e.trigger);
	 
	    e.clearSelection();
	});
	 
	clipboard.on('error', function(e) {
	    console.error('Action:', e.action);
	    console.error('Trigger:', e.trigger);
	});

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