js 实现页面的复制功能 clipboard.js_js刷新页面复制微信号 clipboard.js-优快云博客

本文链接：https://blog.youkuaiyun.com/webxiaoma/article/details/73526709

本文介绍如何使用Clipboard.js插件实现网页上的一键复制功能。通过简单的步骤即可完成按钮绑定与复制操作，并展示了两种使用方式：通过JS方法和data属性方法。

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

今天来说一个插件，我们在做页面时可能会有这样的需求，点击一个按钮然后将一段文字复制到剪切版。这是我们就用到了clipboard.js

这里写图片描述

一、引入clipboard.js

1.下载：http://download.youkuaiyun.com/detail/webxiaoma/9876114
2.最新版本官网下载：http://clipboardshare.codeplex.com/

二、使用方法

js方法：

    <!-- 1. Define some markup -->
    <button class="btn">Copy</button>
    <div>hello</div>

    <!-- 2. Include library -->
    <script src="clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new Clipboard('.btn', {
        target: function() {
            return document.querySelector('div');
        }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });

data 属性方法：

<!-- 1. Define some markup -->
    <div>hello</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

    <!-- 2. Include library -->
    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });