前端技术 手机教程
程序开发 平面动画
系统软件 CMS教程
CMS教程 在线手册
资源下载 网络安全
精准搜索请尝试:精确搜索

clipboard.js中文文档

2021-06-07 14:39:40 来源:原创 作者:寂静的神经

clipboard.js

一款使用现代方法将文本复制到剪贴板的js插件,不使用flash,最小仅3kb。

为什么要使用clipboard

clipboard.js 让web复制文本到剪贴板不再困难,它使用起来非常简单,仅仅需要几句简单的js代码,而不需要几十个步骤来进行配置或加载数百KB的文件。 更重要的是,它不依赖于 Flash 或 JQuery 或任何臃肿的框架。

这就是 clipboard.js 存在的意义。

安装

通过npm:

npm install clipboard --save

你也可以 直接下载 ZIP包

设置

首先,通过 <script> 引用dist目录下的脚本或者使用CDN。

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

接下来通过传递 DOM 选择器、HTML 元素或 HTML 元素列表创建一个 clipboard.js 实例。

new ClipboardJS('.btn');

使用

目前通用的做法是声明式编程,因此我们采用了 HTML5 data attributes 来提高可用性。

从另一个元素复制内容

一个非常常见的需求是从另一个元素复制内容。 您可以通过在触发器元素中添加 data-clipboard-target 属性来实现。

触发器元素的 data-clipboard-target 属性中包含的值需要与另一个元素的选择器相匹配。

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

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

从另一个元素剪切内容

另外,您可以定义一个 data-clipboard-action 属性来指定是要复制还是剪切内容。

如果省略此属性,默认情况下将使用复制。

<!-- Target -->
<textarea id="bar">零五网,分享IT知识,网址:https://www.02405.com,本文档网址:http://www.02405.com/ui/js_jquery/2045.html,...</textarea>

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

从属性复制内容

事实上,您甚至不需要从另一个元素来复制其内容。 您可以只在触发器元素中包含一个 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>

事件

在某些情况下,您可能希望向用户显示操作反馈或捕获复制/剪切后获取的内容。

clipboard.js 提供了 success 和 error 事件方便监听和实现自定义逻辑。

var clipboard = new ClipboardJS('.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);
});

提示

每个应用程序都有不同的设计需求,因此 clipboard.js 不包含任何 CSS 或内置解决方案。

高级用法

如果您不想修改 HTML,那么可以使用命令式 API。 你需要做的就是声明一个函数,做一些事情,然后返回一个值。

例如,如果要动态设置 target ,只需要返回一个节点即可。

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

如果您想动态设置文本,需要返回一个字符串。

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

要在 Bootstrap Modals 或任何其他更改焦点的库中使用,您需要将焦点元素设置为容器值。

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

此外,如果您正在使用单页应用程序,您可能希望更精确地管理 DOM 的生命周期。 以下方法可以清理 clipboard.js 创建的事件和对象。

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

浏览器支持

clipboard.js依赖于 SelectionexecCommand API。 所有浏览器都支持 Selection , 而 execCommand API 则并不被所有浏览器支持,下面列出支持  execCommand API 的浏览器:

Chrome 42+

Edge 12+

Firefox 41+

IE 9+

Opera 29+

Safari 10+

好消息是,如果您需要支持旧浏览器,clipboard.js 会优雅地降级。 您所要做的就是显示对应的提示,当成功事件被调用时显示已复制!当错误事件被调用显示按下 Ctrl+C 复制,因为文本已经被选中。

您还可以通过运行 ClipboardJS.isSupported() 来检查是否支持 clipboard.js,这样您就可以从 UI 中隐藏复制/剪切按钮。

浏览器扩展

我们还开发了一个浏览器扩展,可以在GitHub、MDN、Gist、StackOverflow、StackExchange、npm甚至Medium上的每个代码块上都添加一个“复制到剪贴板”按钮。

ChromeFirefox 安装该扩展。

本文关键词:clipboard.js clipboard

相关文章

零五网,分享IT知识,国内顶级IT知识门户网站。

Copyright (C) www.02405.com, All Rights Reserved.

零五网 版权所有 辽ICP备13002105号-1