复制粘贴插件——clipboard.js的使用

2019-10-11 admin

将文本复制到剪贴板应该不难。配置它不需要几十个步骤,也不需要加载数百KB的js文件 。但最重要的是,它不应该依赖Flash或任何臃肿的框架。这就是clipboard.js存在的原因。

安装

npm 安装

npm install clipboard --save

或者,如果您不喜欢包管理,只需下载一个ZIP文件

设置

现在需要通过传递一个DOM选择器、一个HTML标签或者一组HTML标签来实例化它

new ClipboardJS('.btn');  //通过类名.btn的元素实例化

在内部,我们需要获取与选择器匹配的所有元素,并为每个元素附加事件监听器。但你猜怎么着?如果有数百个匹配项,则此操作会消耗大量内存。 因此,我们使用事件委托,它将多个事件侦听器替换为一个侦听器。

使用方法

我们正在经历一个声明性的复兴,这就是为什么我们决定利用HTML5的数据属性来获得更好的可用性

复制

相当普遍的使用场景是从其他元素复制文本。在触发元素上添加 data-clipboard-target 属性,该属性值用来匹配另一个元素选择器。

<!-- Target -->
<!-- <input
  id="bar"
  value="无敌大帅哥"
> -->
<p id="bar">无敌大帅哥</p>
<!-- Trigger -->
<button class="btn" data-clipboard-target="#bar" > 复制 </button>

剪切

另外,也可以定义 data-clipboard-action 属性为 copy/cut 来,明确操作是 复制 / 剪切 如果忽略了这个属性,便默认 复制

<!-- 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>

注意:

  • data-clipboard-text “级别最高”,在 data-clipboard-target 等属性存在时,复制内容及相关参数以 data-clipboard-text 为准

事件

回调函数: success / error

事件名 参数
success event.action copy/cut 操作
event.text copy/cut 操作文本内容
event.triger 触发操作的DOM元素
error event.action copy/cut 操作
event.triger 触发操作的DOM元素
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或内置的工具提示解决方案。 您在这个演示站点上看到的工具提示是使用GitHub的Primer构建的。如果你正在寻找相似的外观和感觉,你可能想看看。

高级用法

如果你不想修改你的HTML,有一个非常方便的命令式API供你使用。您所需要做的就是声明一个函数,执行您的操作,然后返回一个值。

例如 如果想动态的设置一个目标元素target,则需要返回一个节点,即 动态设置点击复制的目标元素

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

如果想动态设置内容文本text,则返回一个字符串String

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

Bootstrap Modals 中或与任何其他更改焦点的库一起使用时,将希望将焦点元素设置为 container 值。

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

并且,如果在单页应用中使用时,要更精确地管理DOM的生命周期,可以使用以下方法清除创建的事件对象

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

浏览器支持

这个库同时依赖于SelectionexecCommand api。所有浏览器都支持第一个,而以下浏览器支持第二个。

  • Chrome 42 +
  • Edge12 +
  • Firefox 41 +
  • IE 9 +
  • Opera 29 +
  • Safari 10 +

好消息是,如果需要支持旧的浏览器,clipboard.js可以优雅地降级。你所要做的就是显示一个工具提示“复制!”在调用成功事件时,因为文本已经被选中,所以在调用错误事件时,请按Ctrl+C进行复制。 你也可以通过运行ClipboardJS.isSupported()来检查是否支持clipboard.js,这样你就可以从UI中隐藏复制/剪切按钮

彩蛋

ChromeFirefox 浏览器扩展:在 GitHub, MDN, Gist, StackOverflow, StackExchange, npm, and even Mediu 的代码块中 添加一个 “copy to clipboard” 的按钮

[转载]原文链接:https://segmentfault.com/a/1190000020651289

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77158.html

文章标题:复制粘贴插件——clipboard.js的使用

相关文章
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
为什么要选择Nodejs?Nodejs有什么好处?
什么?JavaScript还能用作服务器编程! Caleb Madrigal是来自美国密尔沃基市的一名软件顾问。四年前,他在听说“将JavaScript用作服务器端语言”这样的说法时,认为那是一个荒唐的想法。有那么多服务器端语言可供选择,为...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
回到顶部