后台开发过程中常常要实现点击复制文本的功能，但很多浏览器出于安全考虑不支持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>
3036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
