js 实现复制内容到剪贴板_getelementsbyclassname('copybtn') 复制-优快云博客

本文链接：https://blog.youkuaiyun.com/bai449083657/article/details/51802134

本文介绍了ZeroClipboard、Clipboard.js及jQueryZeroClipboard等JavaScript库，这些库用于实现网页上的复制功能，并提供了一个使用jQueryZeroClipboard的具体示例。

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

可用方案

Zero Clipboard作为一个独立的js库，它利用 Flash 进行复制
Clipboard.js：不用Flash实现剪贴板功能的轻量级JavaScript库
jQuery ZeroClipboard是在ZeroClipboard的基础上进行的改良，简称zClip，作为jQuery的API，jQuery ZeroClipboard也表现的非常简易操作，

zClip Demo

<script type="text/javascript" src="/resources/admin/js/jquery.js"></script>
<script type="text/javascript" src="/resources/admin/js/jquery.zclip.min.js"></script>

$(function() {
    $(".copy").zclip({
        path: "/resources/admin/js/ZeroClipboard.swf",
        copy: function() {
            return $(this).attr("data-url");
        },
        afterCopy: function() {
            alert("复制成功");
        }
    });
});

<td>
    <div style="position:relative;display:inline-block;">   <!-- ***** 解决点击复制无响应的问题 -->
        <a class="copy" data-url="www.xxx.com" href="javascript:void(0);">复制</a>
        <span class="J_PageUrlShow">www.xxx.com</span>
    </div>
</td>