当前位置: 首页 > 未分类>阅读正文

clipboard.js 的使用（详细）

2022.5.21 朱丰华 5555 次 留下评论 9259字

clipboard.js是一个不需要依赖别的框架就能实现复制文字的框架

相对于原生js提供的复制，在兼容性方面要好一些，直接使用浏览器提供的复制命令可能导致格式错乱

引入js文件

clipboard.js是一个开源项目，在github上开源，其官方网站：clipboardjs.com

本站下载：clipboard.js-master-v2.6.0.zip

github下载：clipboard.js-release-v2.8.0.zip

或使用bootcdn：

<script src="https://www.52dixiaowo.com/tools/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

简单使用案例

这里提供一些简单的使用案例

指定元素的复制属性

对一个元素，创建data-clipboard-text属性，然后使用js选择器，生成对应的clipboard对象即可。一般来说，这些元素是能够点击的，比如指定一个button

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo1</title>
        <!-- 引入clipboard.js -->
		<script src="https://www.52dixiaowo.com/tools/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
	</head>
	<body>
        <!-- 创建一个html元素，并设置复制内容为1 -->
    <div id="btn" data-clipboard-text="1">
        点击复制1-><button>Copy1</button>
    </div>
    <script>
        // 获取此html元素
    var btn = document.getElementById('btn');
    // 生成对应的clipboard对象
    var clipboard = new ClipboardJS(btn);
// 复制成功事件
    clipboard.on('success', function(e) {
        console.log(e);
    });
// 复制失败事件
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
	</body>
</html>

演示效果如下：

点击复制1->

当然，可以多个button复制，赋予不同的值，这里使用class选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo2</title>
        <!-- 引入clipboard.js -->
		<script src="https://www.52dixiaowo.com/tools/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
	</head>
	<body>
        <!-- 创建三个button,分别给予不同的值 -->
        <button data-clipboard-text="demo2-1">Copy2-1</button>
        <button data-clipboard-text="demo2-2">Copy2-2</button>
        <button data-clipboard-text="demo2-3">Copy2-3</button>
        <script>
            // 直接获取三个button
        var btns = document.querySelectorAll('button');
        // 生成clipboard
        var clipboard = new ClipboardJS(btns);
        // 复制成功事件
        clipboard.on('success', function(e) {
            console.log(e);
        });
        // 复制失败事件
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
	</body>
</html>
</html>

演示效果如下：

接下来，测试一下非button元素，比如复制代码，pre，code元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo3</title>
        <!-- 引入clipboard.js -->
		<script src="https://www.52dixiaowo.com/tools/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
	</head>
	<body>
        <!-- 创建三个pre,分别给予不同的值 -->
		<pre data-clipboard-text="demo3-1">Copy3-1</pre>
		<pre data-clipboard-text="demo3-2">Copy3-2</pre>
		<pre data-clipboard-text="demo3-3">Copy3-2</pre>
        <script>
            // 直接使用类选择器生成clipboard
        var clipboard = new ClipboardJS('pre');
        // 复制成功事件
        clipboard.on('success', function(e) {
            console.log(e);
        });
        // 复制失败事件
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
	</body>
</html>

测试效果如下：

Copy3-1
Copy3-2
Copy3-2

我们发现，无论这个元素是否为button，它仍然是可以工作的。

指定复制某个元素的text

上面的例子，我们是手动绑定属性，而现在我们可以动态复制text，而不需要关心text是什么

在这里，我们需要在创建clipboard对象时，指定target参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo4</title>
        <!-- 引入clipboard.js -->
		<script src="https://www.52dixiaowo.com/tools/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
	</head>
	<body>
        <!-- 创建一个元素，复制它的text -->
    <button class="btn2">Copy</button>
    <div id="test2">demo4</div>
        <script>
            // 使用target属性，指定要复制的是元素的text
    var clipboard = new ClipboardJS('.btn2', {
        target: function() {
            return document.getElementById("test2");
        }
    });
        // 复制成功事件
        clipboard.on('success', function(e) {
            console.log(e);
        });
        // 复制失败事件
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
	</body>
</html>

演示效果如下：

demo4

从js指定文本

从js设置返回指定的text，它更加灵活

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo5</title>
        <!-- 引入clipboard.js -->
        <script src="https://www.52dixiaowo.com/tools/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
	</head>
	<body>
        <!-- 创建一个元素 -->
    <button class="btn">Copy5</button>
        <script>
            // 返回指定的text
    var clipboard = new ClipboardJS('.btn', {
        text: function() {
            return 'this is demo5';
        }
    });
        // 复制成功事件
        clipboard.on('success', function(e) {
            console.log(e);
        });
        // 复制失败事件
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
	</body>
</html>

演示效果如下：

使用元素属性指定target

使用data-clipboard-action属性默认是copy，你可以省略，也可以显示指定

前面使用了js指定target，当然也可以使用元素属性，指定要复制的text

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo6</title>
        <!-- 引入clipboard.js -->
        <script src="https://www.52dixiaowo.com/tools/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
	</head>
	<body>
        <!-- 使用data-clipboard-action属性设置复制方式，data-clipboard-target属性指定元素 -->
    <input id="foo" type="text" value="demo6">
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
        <script>
         //生成clipboard对象
    var clipboard = new ClipboardJS('.btn');
        // 复制成功事件
        clipboard.on('success', function(e) {
            console.log(e);
        });
        // 复制失败事件
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
	</body>
</html>

演示效果如下：

设置剪切模式

使用data-clipboard-action属性设置剪切模式，一般是textarea标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo7</title>
        <!-- 引入clipboard.js -->
        <script src="https://www.52dixiaowo.com/tools/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
	</head>
	<body>
        <!-- 使用data-clipboard-action属性设置剪切模式 -->
    <textarea id="bar">demo7</textarea>
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
        <script>
            // 生成clipboard对象
    var clipboard = new ClipboardJS('.btn');
        // 复制成功事件
        clipboard.on('success', function(e) {
            console.log(e);
        });
        // 复制失败事件
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
	</body>
</html>

演示效果如下：

更多案例

通过上面的例子，你可以发现，大概有3种方式复制内容

  1. 从元素属性指定内容
  2. 复制指定元素的text
  3. 从js返回指定内容

无论是复制什么，首先要明确复制的内容格式：text，然后再选用最合理的方式。

复制代码

复制代码，可以在页面加载时添加按钮和绑定复制事件，但如果代码块太多会有性能影响。

推荐当鼠标移入代码块时：①生成复制按钮，②绑定复制事件。即可完成代码拷贝

首先给出一个完整的案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>demo8复制代码</title>
        <script src="https://www.52dixiaowo.com/wp-content/themes/zhufenghua/assets/js/jquery-3.5.1.min.js"></script>
        <script src="https://www.52dixiaowo.com/wp-content/themes/zhufenghua/assets/js/clipboard-2.8.0.min.js"></script>
        <style></style>
    </head>
    <body>
      <p>鼠标移入即可复制代码</p>
      <p>以下为pre标签</p>
      <pre>import java.util.Scanner;

public class HelloWorld {
    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        System.out.println("请输入姓名：");
        String name = sc.next();
        System.out.println("你好，"+name+"，您正在使用Java程序。");
    }
}</pre>
<p>以下为pre>code标签</p>
      <pre><code>import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import pojo.Hello;

public class Test {

    public static void main(String[] args) {
        ApplicationContext ApplicationContext = new ClassPathXmlApplicationContext("beans.xml");
        Hello hello = (Hello) ApplicationContext.getBean("hello");
        System.out.println(hello);
    }

}</code></pre>
      <script>
        $("pre").mouseenter(function (e) {
            var _that = $(this);
            _that.css("position", "relative");
            _that.addClass("activePre");
            var copyBtn = _that.find('.copyBtn');
            if (!copyBtn || copyBtn.length <= 0) {
                var copyBtn = '<span class="copyBtn" style="position:absolute;top:2px;right:2px;z-index:999;padding:2px;font-size:13px;color:black;background-color: white;cursor: pointer;" onclick="copyCode()">Copy</span>';
                _that.append(copyBtn);
            }
        }).mouseleave(function (e) {
            var _that = $(this);
            var copyBtn = _that.find('.copyBtn');
            var copyBtnHover = _that.find('.copyBtn:hover');
            if (copyBtnHover.length == 0) {
                copyBtn.remove();
                _that.removeClass("activePre");
            }
        });
        function copyCode() {
            var activePre = $(".activePre");
            activePre = activePre[0];
            var code = activePre.firstChild;
            if(code.nodeName=="CODE"){
                activePre = code;
            }
            var clone = $(activePre).clone();
            clone.find('.copyBtn').remove();
            var clipboard = new ClipboardJS('.copyBtn', {
                text: function () {
                    return clone.text();
                }
            });
            clipboard.on("success", function (e) {
                $(".copyBtn").html("Copied!");
                clipboard.destroy();
                clone.remove();
            });
    
            clipboard.on("error", function (e) {
                clipboard.destroy();
                clone.remove();
            });
        }
    </script>
    </body>
</html>

以上代码，需要引入jquery，实现了对pre，pre>code标签的代码拷贝。其他区块请参考案例自行修改。

消除选中

使用JavaScript的e.clearSelection()消除选中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo9</title>
        <!-- 引入clipboard.js -->
        <script src="https://www.52dixiaowo.com/tools/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
	</head>
	<body>
        <!-- 使用data-clipboard-action属性设置复制方式，data-clipboard-target属性指定元素 -->
    <input id="foo" type="text" value="demo9">
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
        <script>
         //生成clipboard对象
    var clipboard = new ClipboardJS('.btn');
        // 复制成功事件
        clipboard.on('success', function(e) {
            console.log(e);
            e.clearSelection();
        });
        // 复制失败事件
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
	</body>
</html>

本篇完，还有疑问？留下评论吧

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注