clipboard.js实现无flash复制内容到剪贴板

最新推荐文章于 2021-06-20 05:51:19 发布

叶孤心丶

最新推荐文章于 2021-06-20 05:51:19 发布

阅读量911

点赞数

CC 4.0 BY-SA版权

分类专栏： ---- JAVA ------

本文链接：https://blog.youkuaiyun.com/yeguxin/article/details/52228684

---- JAVA ------ 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了在项目中使用clipboard.js来实现无Flash的浏览器内容复制到剪贴板功能，因为Flash已逐渐被淘汰，特别是在移动端。通过引用clipboard.min.js并设置按钮代码，可以轻松实现这一功能。

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

由于最近在写一个项目其中有一个功能是要实现将页面上的某一段内容复制到剪贴板上，当时想用ZeroClipboard.js+ZeroClipboard.swf的,奈何项目中有移动端部分,考虑到flash已经风采不复当年,ios已经抛弃了flash。这个方法就只好作罢.所以用clipboard.js.可以实现纯JavaScript(无 Flash)的浏览器内容复制到系统剪贴板的功能。这是在github上的一个开源项目.

如何使用clipboard.js

1.从github上下载clipboard.min.js,并在页面上引用(clipboard.min.js在github下载的dist文件夹中.)

HTML部分

2.页面上实现,主要是button中的代码

<div class="popup_con" id="shareid" style="display: none">
	<div class="popup_con_box">
		<div class="popup_con_question">
			<span>分享链接<a href="javascript:closeDivFun()"> <img src="<%=imageServerPath%>wap/images/user/cross.jpg" style="width: 15px;border-radius:15px;float:right" /></a></span>
			 <span id="copytext">http://www.krc.sidlu.com/register?id=${user.id }</span>
		</div>
		<div class="popup_con_btn">
			<button class="btn" data-clipboard-action="copy" data-clipboard-target="#copytext">复制链接</button>
		</div>
	</div>
</div>


<div class="homepage_list_inner_right">
	<span><a href="javascript:showDivFun()">邀请好友</a></span>
</div>


<jwr:script src="/script/wap/zip/clipboard.js" /> <!-- 引入js文件 -->

js部分

new Clipboard('.btn'); 实例化语句

	<script type="text/javascript">
		//弹出调用的方法
		function showDivFun() {
			document.getElementById('shareid').style.display = 'block';
		}
		//关闭事件
		function closeDivFun() {
			document.getElementById('shareid').style.display = 'none';
		}
		$(function() {
			var clipboard = new Clipboard('.btn');
			clipboard.on('success', function(e) {
				console.log(e);
			});
			clipboard.on('error', function(e) {
				console.log(e);
			});
		});
	</script>

如果还有什么不懂的可以直接去github上了解,有关于clipboard.js的入门(在最下面) 点击进入