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版本。

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