zoukankan      html  css  js  c++  java
  • 通过 clipboard 实现点击复制

    参考资料

    clipboard 简介:

      clipboard 是一个很小的JS框架,我们只需要通过 script 标签将其引入,就可以使用它提供的复制功能。

    方法一:将待复制的值放在 data-clipboard-text 中,当点击该标签的时候就会将该值复制到剪贴板

    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
    <button data-clipboard-text="将文本内容放在clipboard text中实现复制" class="btn-1">
        点击复制(将文本内容放在clipboard text中实现复制)
    </button>
    <script>
        var clipboard = new ClipboardJS('.btn-1'); //先实例化
        clipboard.on('success', function(e) {
            alert('复制成功'); // 复制成功的事件
        });
        clipboard.on('error', function(e) {
            alert('复制失败'); // 复制失败的事件
        });
    </script>

    方法二:通过 data-clipboard-target 从另一个元素复制文本

    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
    <!-- Target -->
    <input id="foo" value="https://getcharzp.cn">
    <!-- Trigger -->
    <button data-clipboard-target="#foo" class="btn-2">
        点击复制
    </button>
    <script>
        var clipboard = new ClipboardJS('.btn-2'); //先实例化
        clipboard.on('success', function(e) {
            alert('复制成功 2'); // 复制成功的事件
        });
        clipboard.on('error', function(e) {
            alert('复制失败 2'); // 复制失败的事件
        });
    </script>
  • 相关阅读:
    添加事件(jquery)
    闭包导致的问题
    学习之js绑定事件
    第二条 一个类如果有多个参数,考虑用Builder构造者模式
    用Intellij IDEA 创建第一个maven项目!
    OrderSessionHelper查看订单在session是否存在的辅助类
    css——overflow
    css——盒子
    css——外部样式
    css——权重叠加
  • 原文地址:https://www.cnblogs.com/GetcharZp/p/12162953.html
Copyright © 2011-2022 走看看