js实现复制到粘贴板 ZeroClipboard

最新推荐文章于 2025-06-06 09:13:03 发布

huobing123456789

最新推荐文章于 2025-06-06 09:13:03 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 剪切板复制

本文链接：https://blog.youkuaiyun.com/huobing123456789/article/details/50992039

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用ZeroClipboard.js轻松实现网页上的复制粘贴功能，包括下载相关库、HTML代码整合及关键JavaScript实现步骤。教程适用于Chrome浏览器，确保用户体验不受IE限制。

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

实现复制粘贴这样简单的功能，竟然网上没啥有用的东西！特此实验并整理，望后来者少走弯路。（用chrome测试通过，不喜IE故未做IE测试）

1、下载 ZeroClipboard.min.js 和 ZeroClipboard.swf 或下载此二文件的压缩包或去官方下载。

2、引入js库。

<script src="jQuery.js" type="text/javascript"></script><!-- 你自己项目中的就可 -->
<script src="ZeroClipboard.min.js" type="text/javascript"></script>
<script src="clip.js" type="text/javascript"></script><!-- 你测试或者使用的js -->

3、html代码。

<a id="copy" data-clipboard-text="zhan-tie-nei-rong">复制链接</a>

其中id用于js选择器使用，data-clipboard-text用于保存你要粘贴的内容。此处"zhan-tie-nei-rong"为例。

4、JS代码（ clip.js）

$(function(){
    $('#copy').click(function(){
        copy("copy");
    })
    $('#copy').click();//由于第一次点击无效，故加载时先触发一次。
})

function copy(id){
    var clip = new ZeroClipboard($('#'+id)[0], {
        moviePath: '/resource/js/plugins/ZeroClipboard/ZeroClipboard.swf'
    });
    clip.on( 'complete', function(client, args) {
        alert('复制成功, 您可以到其他地方粘贴该网址了！');
    });
}

参考文章：复制到剪贴板的JS实现--ZeroClipboard （兼解决IE下兼容问题）