後臺開發過程中常常要實現點擊複製文本的功能,但很多瀏覽器出於安全考慮不支持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版本。