clipboard.js：轻量级现代浏览器复制剪切库

项目地址：https://github.com/zenorocha/clipboard.js

这是一个现代化的“复制到剪切板”插件，不依赖Flash，gzip压缩后体积仅3kb。

为什么使用它

将文字复制到剪切板的操作不应过于复杂，无需配置繁琐步骤或加载数百KB的文件，更不应依赖Flash或其他臃肿框架。

这正是clipboard.js诞生的初衷。

安装

你可以通过npm进行安装。

npm install clipboard --save

如果不使用包管理工具，直接下载ZIP文件即可。

开始

首先，引入位于dist目录下的脚本文件，或者使用第三方CDN。

<script src="dist/clipboard.min.js"></script>

接着，通过传入DOM选择器、HTML元素或HTML元素数组作为参数来实例化对象。

new Clipboard('.btn');

本质上，我们需要获取所有匹配选择器的元素，并为每个元素设置监听事件。但考虑到如果有成百上千个匹配元素，这样做会消耗大量内存。

因此，我们采用事件代理机制，通过单个事件监听器替代多个监听器，以解决性能问题。

使用

我们正处于声明式开发的复兴期，因此决定利用HTML5data属性来提升可用性。

从另一个元素复制文本

一个常见用例是从其他元素复制内容。你可以为目标元素添加data-clipboard-target属性来实现此功能。

该属性的值即为能匹配到目标元素的选择器。

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

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

从另一个元素剪切文本

此外，你可以定义data-clipboard-action属性来指定执行复制（copy）还是剪切（cut）操作。

若省略此属性，默认执行复制（copy）操作。

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

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

正如预期，剪切（cut）操作仅在<input>或<textarea>元素上生效。

从属性复制文本

实际上，你甚至无需从其他元素复制内容。只需为目标元素设置data-clipboard-text属性即可。

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

事件

如需展示用户反馈或在复制/剪切后获取已选文字，可参考以下示例。

我们通过触发自定义事件，如success和error，允许你设置监听器并实现自定义逻辑。

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

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

你可以访问该网站并打开控制台，查看演示示例。

工具提示（Tooltips）

各应用的设计需求不同，因此clipboard.js未包含任何CSS或内置工具提示解决方案。

示例网站中看到的工具提示由GitHub's Primer构建。若寻找外观体验相似的库，可查看该项目。

高级选项

若不想修改HTML，我们提供便捷的命令式API。只需声明一个函数，进行处理并返回值。

例如，若希望动态设置target，需返回一个节点（Node）。

new Clipboard('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }
});

若希望动态设置text，需返回一个字符串。

new Clipboard('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});

若在Bootstrap模态框（Modals）或其他修改焦点的类库中使用，需将获取焦点的元素设置为container属性的值。

new Clipboard('.btn', {
    container: document.getElementById('modal')
});

同样地，若使用单页应用，你可能需更精确地管理DOM生命周期。可清理事件及创建的对象。

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

浏览器支持

该库依赖Selection和execCommand API。前者兼容所有浏览器，后者兼容以下浏览器。

好消息是，若需支持旧浏览器，clipboard.js可优雅降级。只需在success事件触发时提示“已复制！”，在error事件触发时提示“按Ctrl+C复制文字”（此时用户已选中要复制的文字）。

你也可通过运行Clipboard.isSupported()检查浏览器是否支持clipboard.js，若不支持，可隐藏复制/剪切按钮。

到此这篇关于clipboard.js实现复制剪切功能的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持本站。