前端剪切板功能clipboard

Clipboard.js使用指南

最新推荐文章于 2025-05-28 20:23:59 发布

原创最新推荐文章于 2025-05-28 20:23:59 发布 · 494 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个轻量级的Clipboard.js库的使用方法，包括如何下载、引入和使用该库实现网页元素的复制功能。通过简单的HTML和JavaScript代码示例，展示了如何创建一个复制按钮，并在点击时将指定的内容复制到用户的剪贴板。

下载

clipboard下载地址

使用

<!-- 要复制的区域 -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- 复制按钮，关联idd为foo的 -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>


<script>
// JS也必须要new一个出来否则无法正常使用
var clipboard=new ClipboardJS('.btn');

clipboard.on('success',function(e){
    console.log(e);
})
clipboard.on('error',function(e){
    console.log(e);
})
</script>