“复制到剪贴板”功能是我们每天都用几十次的功能,但是客户端API一直都很缺乏,一些较旧的API和浏览器实现需要一个可怕的“你确定?” - 风格的对话之前,内容将被复制到剪贴板 - 不适合可用性或信任。大约七年前,我博客写了ZeroClipboard,一个以更新颖的方式将内容复制到剪贴板的解决方案。
嘿,我们都讨厌Flash,但是功能一直是主要目标,而且对于这个目的来说非常有效,所以我们不得不承认这是一个体面的解决方案。几年后,我们有一个更好的,无Flash的解决方案: clipboard.js。View Demo。复制到剪贴板的clipboard.js API简短而又好用,用法如下:
1.复制和剪切Textarea和Input的值:
/* Textarea - Cut
<textarea id="bar">hello</textarea>
<button class="copy-button" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
*/
var clipboard = new Clipboard('.copy-button');
/* Input - Copy
<input id="foo" type="text" value="hello">
<button class="copy-button" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
*/
var clipboard = new Clipboard('.copy-button');
- 复制元素innerHTML
/* HTMLElement - Copy
<div id="copy-target">hello</div>
<button class="copy-button" data-clipboard-action="copy" data-clipboard-target="#copy-target">Copy</button>
*/
var clipboard = new Clipboard('.copy-button');
3.Target 和Text 功能
// Contents of an element
var clipboard = new Clipboard('.copy-button', {
target: function() {
return document.querySelector('#copy-target');
}
});
// A specific string
var clipboard = new Clipboard('.copy-button', {
text: function() {
return 'clipboard.js is awesome!';
}
});
- 操作后事件回调函数:
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
demo地址:预览demo
不用flash组件,api简洁,支持兼容所有主流浏览器使 clipboard.js受很多用户和web的青睐,