ZeroClipboard实现跨浏览器点击复制文本功能

后台开发过程中常常要实现点击复制文本的功能,但很多浏览器出于安全考虑不支持js复制文本,使用开源库ZeroClipboard可以很好地解决该问题。

从ZeroClipboard的官网http://zeroclipboard.org/下载库文件。

在页面上引入ZeroClipboard并配置好ZeroClipboard.swf的路径。(ZeroClipboard使用flash来实现复制,无法在移动端使用)

在页面加载完之后找到要实现点击复制功能的dom元素。

用ZeroClipboard为它们添加点击复制功能,复制的内容为该元素的data-clipboard-text属性。

示例如下:

<html>
<head>
	<title>ZeroClipboard测试</title>
	<script src="../lib/jquery.js"></script>
	<script src="ZeroClipboard.min.js"></script><!-- 引入ZeroClipboard -->
	<script>
		//设置ZeroClipboard的swf路径
		ZeroClipboard.config( { swfPath: 'ZeroClipboard.swf' } );
	</script>
</head>
<body>
<p><a href="javascript: void(0);" class="copy-btn" data-clipboard-text="Msg1">复制Msg1</a></p>
<p><a href="javascript: void(0);" class="copy-btn" data-clipboard-text="Msg2">复制Msg2</a></p>
<p><a href="javascript: void(0);" class="copy-btn" data-clipboard-text="Msg3">复制Msg3</a></p>

<script>
$(function() {
	//将需要添加复制功能的dom元素找出来,这里是class是copy-btn的元素
	var doms = [];
	$('.copy-btn').each(function() {doms.push(this);});
	//通过ZeroClipboard为这些元素添加复制功能,元素的data-clipboard-text属性为要复制的内容
	var clip = new ZeroClipboard(doms);
	//设置aftercopy事件让复制成功后弹窗提示
	clip.on('aftercopy', function() {alert('复制成功');});
});
</script>
</body>
</html>
注意:只有在服务端环境下才生效,本地直接用浏览器打开无法复制。这里使用的ZeroClipboard为2.x版本。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章