向剪切板复制文本的js库——clipboard.js

最新推荐文章于 2025-06-11 11:41:59 发布

okfine17

最新推荐文章于 2025-06-11 11:41:59 发布

阅读量7.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/yCharlee/article/details/52183467

Web前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用clipboard.js库来实现网页中文本的复制功能。通过加载cdn引入库，设置html元素的data-clipboard-target和aria-label属性，配合js代码，可以轻松实现复制按钮并提示复制结果。尽管在样式上存在一些问题，如input框长度无法自适应，但clipboard.js提供了一个简单易用的解决方案。

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

首先，加载clipboard.js文件（我上网找的一个cdn）：

<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>

其次，html代码：

<input type="text" value="http://suo.im/8p5iq" id="onlineImgUrl"/>
<button id="copyLink" class="btn btn-primary" class="btn dropdown-toggle" data-clipboard-target="#onlineImgUrl" aria-label="复制成功">复制链接</button>

注：
data-clipboard-target属性说明复制的是#onlineImgUrl中的value内容，我这的input框中的value是空的，因为是用动态写入的。
aria-label属性用来提示复制结果信息，我这如果复制成功会弹出“复制成功”。
最后，js代码这样：

    //复制链接按钮
    var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {
        var msg = e.trigger.getAttribute('aria-label');
        alert(msg);
    });

看看效果图：
这里写图片描述
input的框有点ugly……因为input框好像长度不能实现自适应诶，暂时先让它丑着下( ⊙ o ⊙ )啊！哈呦哦，我图片网址压缩了。