插件说明
这是一个不依赖 flash,不依赖其他框架就能实现文本复制或剪切板的轻量级插件
官网地址:/
插件安装:
第一种:通过 npm 工具安装
npm install clipboard --save
第二种:GitHub 下载,然后引入 dist 文件夹下的 clipboard.min.js
下载地址:/zenorocha/clipboard.js
<script src="dist/clipboard.min.js"></script>
使用步骤:
1、引入 js 插件资源文件
<script src="js/clipboard.min.js"></script>
2、在页面定义复制按钮
<button class="copyBtn" data-clipboard-text="复制的内容">复制</button>
3、初始化 ClipboardJS 对象,并打印复制的内容。初始化时可以传入 dom 选择器、html 元素、html 元素列表
//初始化 ClipboardJSvar clipboard = new ClipboardJS('.copyBtn');//复制成功clipboard.on('success', function (e) {console.log(e.text);e.clearSelection();});//复制失败clipboard.on('error', function (e) {console.log(e.action);});
插件功能:
1、从另一个元素复制文本:给目标元素添加一个 data-clipboard-target 属性来实现这个功能,这个属性的值就是能匹配到另一个元素的选择器。
<input id="copyTarget" value="复制的内容"> <button class="copyBtn" data-clipboard-target="#copyTarget">复制</button>
2、从另一个元素剪切文本:给目标元素添加一个 data-clipboard-action 属性来指明你想要复制还是剪切内容。
data-clipboard-action="copy" 复制文本,默认为复制文本
data-clipboard-action="cut" 剪切文本,cut 操作只在 <input> 或 <textarea> 元素上生效
<textarea id="copyTarget">剪切的内容</textarea> <button class="copyBtn" data-clipboard-action="cut" data-clipboard-target="#copyTarget">剪切</button>
3、从属性复制文本:给目标元素添加一个 data-clipboard-text 属性即可,属性的内容就是复制的内容。
<button class="copyBtn" data-clipboard-text="复制的内容">复制</button>
插件事件:
在用户复制或剪切后,可以通过触发自定义事件 success 和 error 实现自定义逻辑
var clipboard = new ClipboardJS('.copyBtn');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);});
高级用法:
如果不想修改 HTML,我们提供了一个非常方面的命令式的 API 给你使用。需要做的就是声明一个函数,做一些处理,并返回一个值。
1、动态设置 target,需要返回一个 node 节点:
new ClipboardJS('.btn', {target: function(trigger) {return trigger.nextElementSibling;}});
2、动态设置 text,需要返回字符串:
new ClipboardJS('.btn', {text: function(trigger) {return trigger.getAttribute('aria-label');}});
3、如果在 Bootstrap 模态框 (Modals) 中使用,或在其他修改焦点的类库中使用,将获得焦点的元素设置为 container 属性值:
new ClipboardJS('.btn', {container: document.getElementById('modal')});
4、如果使用单页应用,想要更加精确地管理 DOM 的生命周期,可以清理事件及创建的对象:
var clipboard = new ClipboardJS('.btn');clipboard.destroy();
浏览器支持:
这个库依赖 Selection 和 execCommand APIs,前者兼容所有的浏览器,后者只兼容以下浏览器版本。
Selection:/en-US/docs/Web/API/Selection
execCommand:/en-US/docs/Web/API/Document/execCommand
Selection 支持的所有浏览器:/#search=selection
检查浏览是否支持:
Clipboard.isSupported()