clipboard.js:最轻便的复制页面内容到剪切板的JS

网站内容实现一个功能点击一个按钮,将内容复制到剪贴板。传统的复制页面内容到剪切板主要方法是通过 Flash,但是在现代浏览器中,Flash 逐渐没落,慢慢被淘汰,搜索了一圈,发现 clipboard.js 是目前实现该功能最轻便的工具。

clipboard.js 的使用方法

clipboard.js 只有3kb大小,无需 Flash,兼容所有现代浏览器,但是经过测试不支持微信内置浏览器。

使用还算简单,简单几步就搞定,下面简单介绍下clipboard.js的使用方法:

1. 首先下载或者使用CDN的资源,目前七牛就支持:

<script type='text/javascript' src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js"></script>
2. 初始化 clipboard 对象
<script type='text/javascript'>
var clipboard = new Clipboard('.btn');
</script>

3. 定义要复制的对象和点击按钮3. 定义要复制的对象和点击按钮

<!-- Target -->
<div id="foo">文字文字</div>

<!-- Trigger -->
<a class="btn"  href="javascript:" data-clipboard-target="#foo">复制</a>

如果是剪切,加上属性:

data-clipboard-action="cut"

如果复制的文字是隐藏的,可以通过 data-clipboard-text 定义到点击的按钮上

clipboard.js 的演示

文字文字 复制

clipboard.js 的事件

有时候我们需要一些用户反馈,在初始化对象的时候可以定义 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);
});
X
赞助一下:
    支付宝    微信    QQ红包

打开支付宝扫一扫
clipboard.js:最轻便的复制页面内容到剪切板的JS
版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。
本文链接:http://suppore.cn/270.html    百度已收录
正文到此结束

点击下方支持本站

点击支持下贵站吧
点击支持下贵站吧

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

微笑 可爱 憨笑 鼓掌 白眼 发呆 撇嘴 色 得意 吐 抠鼻 可怜 呲牙 惊讶 冷汗 流泪 大哭 发怒 抚摸 傲慢 惊恐 鄙视 疑问 奸笑 抓狂 偷笑 流汗 擦汗 晕 委屈 吓 衰 糗大了 威武 给力 牛逼

评论信息框

火箭正在发射中...

已有1条吐槽

assignment

2016-11-23 20:23 罗马尼亚 CZ88.NET
感谢楼主的分享
 Windows 10 x64   Firefox 40.0