clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中。它不依赖flash,使用非常简单。
安装
可以通过npm或bower来安装clipboard.js插件。
npm install clipboard --save bower install clipboard --save
使用方法
或者下载压缩包,在页面中引入clipboard.js文件。
<script type="text/javascript" src="js/clipboard.js"></script>
复制文本
你可以在触发元素上添加data-clipboard-target
属性,该属性指向要进行复制的目标元素的ID,例如下面的代码:
<!-- 目标元素 --> <input id="foo" value="要复制的文本"> <!-- 触发元素 --> <button class="btn" data-clipboard-target="#foo"> <img src="assets/clippy.svg" alt="复制到剪贴板"> </button>
剪切文本
你可以通过data-clipboard-action
属性来指明你是想要“复制”,还是要“剪切”。如果没有指明该属性,默认为进行复制操作。
<!-- 目标元素 --> <textarea id="bar">要剪切的内容</textarea> <!-- 触发元素 --> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> 剪切到剪贴板 </button>
从属性中复制
你可以在目标元素上设置data-clipboard-text
属性,点击触发元素后会将该属性的内容复制到剪贴板中。
<button class="btn" data-clipboard-text="这里的内容会被复制"> 复制到剪贴板 </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); });
高级参数
如果你不想修改你的HTML代码,可以通过下面的参数来执行复制操作。
如果你想动态的设置一个target
目标元素,你可以像下面这样做。
new Clipboard('.btn', { target: function(trigger) { return trigger.nextElementSibling; } });
如果你想动态的设置文本,可以:
new Clipboard('.btn', { text: function(trigger) { return trigger.getAttribute('aria-label'); } });
销毁clipboard.js插件的方法如下:
var clipboard = new Clipboard('.btn'); clipboard.destroy();
浏览器兼容
- chrome42+
- Firefox41+
- IE9+
- Opera29+
clipboard.js插件的github地址为:https://github.com/zenorocha/clipboard.js