[译] 复制文本到剪切板的clipboard.js使用方法

工作中需要使用到的一个复制插件，使用简单兼容性还行，因为没找到中文版介绍就自己翻译一下，水平有限，不一定全按文章走，如果有问题欢迎指正！！
为了更加直观的展示用法,略微修改下代码让你们可以每个代码都直接看到效果,引用第三方地址可以放心拉到本地运行.
原文地址https://clipboardjs.com/

clipboard.js能够用现代的方法来将文本复制到剪贴板上，不依赖Flash，不依赖框架，并且衹有3kb大小。

为什么？
复制文本到剪贴板应该不难。它不需要许多步骤来配置或加载数百KBs大小文件。但最重要的是,它不应该依赖Flash或任何臃肿的框架。
这就是为什么clipboard.js的存在。

安装

你可以在npm。

npm install clipboard --save

或者浏览器中。

bower install clipboard --save

如果你不是在包管理,就下载一个ZIP文件clipboard.js。

设置

首先,从dist文件夹(用户放置脚本的路径)引入脚本或者从第三方加载CDN提供商。
用户放置脚本的路径：<script src="dist/clipboard.min.js"></script>
jsDelivr：<script src="https://cdn.jsdelivr.net/clip...;></script>
cdnjs：<script src="https://cdnjs.cloudflare.com/...;></script>
RawGit：<script src="https://cdn.rawgit.com/zenoro...;></script>

现在,您只需要通过DOM选择器,HTML元素,或HTML元素的列表去实例化它。

new Clipboard('.btn');

在内部,我们需要获取所有匹配的元素选择器并且为它们每一个添加上事件侦听器。但你猜怎么著?如果你有成百上千个匹配元素选择器,这个操作会消耗大量的内存。
因为这个原因我们使用事件代理通过一个侦听器取代了多个事件监听器。毕竟,#完美。

使用

我们生活一个说明性的复兴(原文We're living a declarative renaissance，我没搞懂这句话。。),这就是为什么我们决定利用 HTML5 data attributes去获得更好的可用性。

从另一个元素复制文本

常见的用例是复制另一个元素的内容。你可以通过在触发元素里添加一个data-clipboard-target属性使用。
它的值被包含在另一个将会被匹配到的元素选择器的属性上。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>constructor-nodelist</title>
        <script src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
    </head>

    <body>
        <!-- Target -->
        <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

        <!-- Trigger -->
        <button class="btn" data-clipboard-target="#foo">
            Copy to clipboard
        </button>
        <br/>
        <input type="" name="" id="" value="" placeholder="你可以在这里粘贴看效果"/>

        <!-- 3. Instantiate clipboard by passing a list of HTML elements -->
        <script>
            var btns = document.querySelectorAll('button');
            var clipboard = new Clipboard(btns);

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

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

</html>

从另一个元素剪切文本

另外,你可以定义一个data-clipboard-action属性来指定如果你想复制或剪切内容。
如果省略该属性,默认将使用复制。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>constructor-nodelist</title>
        <script src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
    </head>

    <body>
        <!-- Target -->
        <textarea id="bar">Mussum ipsum cacilds...</textarea>

        <!-- Trigger -->
        <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
            Cut to clipboard
        </button>
        <br/>
        <input type="" name="" id="" value="" placeholder="你可以在这里粘贴看效果"/>

        <!-- 3. Instantiate clipboard by passing a list of HTML elements -->
        <script>
            var btns = document.querySelectorAll('button');
            var clipboard = new Clipboard(btns);

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

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

</html>

正如您可能期望的那样,剪切操作只能在<input>或< textarea >元素使用。

从属性复制文本

事实上,你甚至不需要另一个元素复制其内容。你可以在您的触发元素里包含data-clipboard-text属性。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>constructor-nodelist</title>
        <script src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
    </head>

    <body>
        <!-- Trigger -->
        <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
            Copy to clipboard
        </button>
        <br/>
        <input type="" name="" id="" value="" placeholder="你可以在这里粘贴看效果"/>

        <!-- 3. Instantiate clipboard by passing a list of HTML elements -->
        <script>
            var btns = document.querySelectorAll('button');
            var clipboard = new Clipboard(btns);

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

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

</html>

事件

有些情况下,你想展示一些用户反馈或捕获被选中复制/剪切操作后的行为。
这就是为什么我们定制事件如成功和错误让你监听和执行你的自定义逻辑。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>constructor-nodelist</title>
        <script src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
    </head>

    <body>
        <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

        <!-- Trigger -->
        <button class="btn" data-clipboard-target="#foo">
            Copy to clipboard
        </button>

        <p class="p1"></p>
        <p class="p2"></p>
        <p class="p3"></p>

        <script>
            var btns = document.querySelectorAll('button');
            var clipboard = new Clipboard('.btn');

            clipboard.on('success', function (e) {
                console.log(e)
                document
                    .querySelector('.p1')
                    .innerHTML = 'Action: ' + e.action;
                document
                    .querySelector('.p2')
                    .innerHTML = 'Text:  ' + e.text;
                document
                    .querySelector('.p3')
                    .innerHTML = 'Trigger:  ' + e.trigger;

                e.clearSelection();
            });

            clipboard.on('error', function (e) {
                document
                    .querySelector('.p1')
                    .innerHTML = 'Action: ' + e.action;
                document
                    .querySelector('.p3')
                    .innerHTML = 'Trigger:  ' + e.trigger;
            });
        </script>
    </body>

</html>

现场演示,只是需要打开控制台。

高级用法

如果你不想修改HTML,有一个很方便的命令式API供您使用。所有您需要做的就是声明一个函数,做你的事,并返回一个值。
例如,如果你想要动态设定了一个目标,你需要返回一个节点。(好像这里不支持界面跟控制台同时出现,所以操作看不到打印信息,可以完整复制下来直接运行)

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>constructor-nodelist</title>
        <script src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
    </head>

    <body>

        <!-- Target -->
        <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

        <!-- Trigger -->
        <button class="btn" data-clipboard-target="#foo">
            Copy to clipboard
        </button>

        <!-- 3. Instantiate clipboard by passing a list of HTML elements -->
        <script>
            var btns = document.querySelectorAll('button');
            var clipboard = new Clipboard(btns, {
                target: function (trigger) {
                    console.log(trigger.previousElementSibling);
                    return trigger.previousElementSibling;
                }
            });
        </script>
    </body>

</html>

如果你想要动态地设置一个文本,你需要返回一个字符串。(注意不能再目标元素上加data-clipboard-target属性,会报错的)
写法有两种:

直接返回固定字符串

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>constructor-nodelist</title>
        <script src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
    </head>

    <body>
        <!-- Trigger -->
        <button class="btn">Copy to clipboard</button>

        <!-- 3. Instantiate clipboard by passing a list of HTML elements -->
        <script>
            var btns = document.querySelectorAll('button');
            var clipboard = new Clipboard('.btn', {
                text: function () {
                    return 'to be or not to be';
                }
            });
        </script>
    </body>

</html>

藏在目标元素属性中获取返回

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>constructor-nodelist</title>
        <script src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
    </head>

    <body>
        <!-- 1. Define some markup -->
        <button class="btn" aria-label='Define some markup'>Copy to clipboard</button>
        <br/>
        <input type="" name="" id="" value="" placeholder="你可以在这里粘贴看效果"/>

        <!-- 3. Instantiate clipboard -->
        <script>
            var clipboard = new Clipboard('.btn', {
                text: function (trigger) {
                    return trigger.getAttribute('aria-label');
                }
            });

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

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

</html>

还有,如果你正在使用单页应用程序,您可能想要更精确地管理的生命周期DOM。这是教你如何清理创建的事件和对象。

var clipboard = new Clipboard('.btn');
clipboard.destroy();

浏览器兼容性

这个库依赖于Selection和execCommand APIs。前者兼容所有浏览器,后者兼容以下浏览器。

图片描述
好消息是,如果你需要兼容老版本浏览器clipboard.js支持优雅降级。你要做的就是当执行成功时回调函数弹出一个提示框说复制!,按Ctrl + C时在失败事件的回调函数提示因为文本已经被选中。
您还可以通过运行Clipboard.isSupported()查看clipboard.js是否支持,这样你可以从UI隐藏复制/剪切按钮。

下面是我说的,这是全文中挺重要的一步,也是我敢直接使用在项目的原因,因为大家都知道插件大多有它自己的局限性跟兼容问题,为了折腾那些会耗费很多的时间精力,更多时候因为水平问题根本无从下手,
有了一个方法支持我就让它出现,不支持就让用户自己复制,没有什么善后工作了!

Clipboard.isSupported()

[译] 复制文本到剪切板的clipboard.js使用方法

安装

设置

使用

从另一个元素复制文本

从另一个元素剪切文本

从属性复制文本

事件

高级用法

直接返回固定字符串

藏在目标元素属性中获取返回

浏览器兼容性

Afterward

引用和评论

Vue3版3D老虎机实现思路

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号