点击复制功能实现

最新推荐文章于 2023-11-02 10:17:46 发布

原创最新推荐文章于 2023-11-02 10:17:46 发布 · 10w+ 阅读

4 ·

CC 4.0 BY-SA版权

本文详细介绍如何利用Clipboard.js库实现在网页上的一键复制功能。通过引入库文件，设置HTML结构，使用JavaScript实例化复制行为，实现点击按钮即可复制指定内容到剪贴板。适用于前端开发中快速提升用户体验。

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

网站https://clipboardjs.com/
实现步骤：
1.引入https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js
2.点击复制按钮

<div class="code">要复制的内容</div>

<input class="layui-anim copy huafeiCopy"  id="codeCopy' + index + '" data-clipboard-action="copy" data-clipboard-target="#code' + index + '" type="button" value="点击复制">
data-clipboard-action动作，copy复制（默认）cut剪切
data-clipboard-target选择器，选择需要复制的
每一个点击复制按钮需要实例化一个

 var clipboard1 = new Clipboard('#codeCopy' + index);
    clipboard1.on('success', function (e) {                    
        e.clearSelection();
        //复制成功提示
        layer.msg('复制成功！');
    });
    // '#codeCopy'选择器指定上面的按钮