javascript实现的复制到剪贴板

“复制到剪贴板”功能是我们每天都用几十次的功能,但是客户端API一直都很缺乏,一些较旧的API和浏览器实现需要一个可怕的“你确定?” - 风格的对话之前,内容将被复制到剪贴板 - 不适合可用性或信任。大约七年前,我博客写了ZeroClipboard,一个以更新颖的方式将内容复制到剪贴板的解决方案。 
嘿,我们都讨厌Flash,但是功能一直是主要目标,而且对于这个目的来说非常有效,所以我们不得不承认这是一个体面的解决方案。几年后,我们有一个更好的,无Flash的解决方案: clipboard.jsView 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');
  1. 复制元素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!';
    }
});
  1. 操作后事件回调函数:
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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值