clipboard.js 介绍
这是著名开源项目 clipboard.js 的 README.md,我把它翻译成中文。发出来,方便自己和他人阅读。
项目地址: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');
本质上,我们需要获取所有选择器匹配到的元素,并为每一个选择器设置监听事件。但仔细想想,如果有成百上千个匹配到的元素,这样做会耗费大量内存。
因此,我们使用事件代理,通过一个事件监听器来取代多个事件监听。毕竟,性能是问题。
使用
我们正在经历一场声明式的复兴,这就是为什么我们决定利用 HTML5 data
属性 来提高可用性的原因。
从另一个元素复制文本
一个很常见的用例是从另一个元素复制内容。你可以给目标元素添加一个 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。前者 兼容所有的浏览器,后者兼容以下浏览器。
42+ ✔ | 12+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | 10+ ✔ |
好消息是,如果你需要支持旧浏览器,clipboard.js 可以优雅降级。你所要做的就是在 success
事件触发时提示用户“已复制!”,error
事件触发时提示用户“按 Ctrl+C 复制文字”(此时用户要复制的文字已经选择了)。
你也可以通过运行 Clipboard.isSupported()
来检查浏览器是否支持 clipboard.js,如果不支持,你可以隐藏复制/剪切按钮。
福利
一个浏览器拓展程序,可以添加一个“复制到剪切板”按钮到所有的代码块,支持 GitHub,MDN,Gist,StackOverflow,StackExchange,npm,甚至 Medium。
协议
MIT 协议 © Zeno Rocha
clipboard.js 介绍的更多相关文章
- 使用clipboard.js复制页面内容到剪切板
最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼 ...
- js实现点击复制网页内容(基于clipboard.js)
浏览网页过程中会遇到点击复制链接地址的情况,下面就介绍一种实现方法,该方法是基于clipboard.js: 官网地址:https://clipboardjs.com/: clipboard.js使用比 ...
- Clipboard.js实现复制内容到剪切板
<script type="text/javascript"> var clipboard1 = new Clipboard('.bt01'); clipboard1. ...
- Clipboard.js – 现代方式实现复制文本到剪贴板
复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...
- js实现剪切、复制、粘贴——clipBoard.js
摘要: 最近项目上要实现一个点击按钮复制链接的功能,刚开始查找了一些资料,找了几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过j ...
- clipboard.js IE下 不允许复制时, 问题修改
问题描述:https://github.com/zenorocha/clipboard.js/wiki/Known-IssuesOn IE9-11 there's a prompt that asks ...
- Clipboard.js : 移动端浏览器实现网页内容复制
.bl { padding: 5px 10px; border-left: 3px solid #009a61; background: #f6f6f6; color: #555; font-size ...
- Vue.js介绍
http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思 ...
- js介绍
---恢复内容开始--- js介绍 最近学习了js,那么我今天给大家介绍下js.希望对初学者有些帮助. js就是常说的JavaScript.JavaScript是目前世界上最流行的编程语言之一.这门语 ...
随机推荐
- javasript校验字符串【正则和其他函数】
/**javasript校验输入框值只能为数字中文英文和下划线**/function isRegex(s){ var reg=/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/; if (! ...
- stylus选中hover元素的兄弟元素下的子元素
stylus设置兄弟元素样式:鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ . ...
- [自制操作系统] 原子操作&核间中断&读写锁&PRWLock
本文主要为读论文Scalable Read-mostly Synchronization Using Passive Reader-Writer Locks的记录. 并将其在JOS上实现.其中包括la ...
- 九度OJ 1017 还是畅通工程
#include <iostream> #include <string.h> #include <sstream> #include <math.h> ...
- centos6 内核优化
以下为部分优化参数,具体优化方法还要看情况而定 [root@localhost ~]# vi /etc/sysctl.conf #末尾添加如下参数 net.ipv4.tcp_syncookie ...
- JS内置对象-自定义对象
1.基本概念: ①对象:对象是拥有一系列无序属性和方法的集合. ②键值对:对象中的数据是以键值对的形式存在,对象的每个属性和方法,都对应值一个键名,以键取值. ③属性:描述对象特征的一系列变量称为属性 ...
- 扫雷游戏制作过程(C#描述):第五节、菜单操作(续)
前言 这里给出教程原文地址. 该项目已经放在github上托管. 发布版已经分享到百度网盘 菜单操作(续) 接着节前一章节的内容,我们继续完善菜单栏的功能. 我们首先,先完善Rank的选项,我们希望我 ...
- 201521123020 《Java程序设计》第7周学习总结
1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 public boolean contains(Object o) { re ...
- 201521123062《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 Q1.clone方法 1.1 Object ...
- 201521123004 《Java程序设计》第2周学习总结
本周学习总结 ① String类的对象是不可变(immutable)的 String对象创建之后不能再进行修改 -->StringBuilder ② 字符串的拼接(使用"+" ...