javascript实现的复制到剪贴板

“复制到剪贴板”功能是我们每天都用几十次的功能，但是客户端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的青睐，

原文地址：JavaScript Copy to Clipboard

javascript实现的复制到剪贴板

猜你喜欢