纯js实现复制到剪贴板功能
来源:互联网 发布:摩比神奇 知乎 编辑:程序博客网 时间:2024/06/02 21:18
在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍。随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽。本文介绍的一款JS插件,实现了纯JS方法复制文本到剪切板。
插件名是Clipboard.js,该插件不依赖 Flash,而是依赖于最新HTML5推出 Selection API 和 execCommand API。
execCommand
支持以下浏览器:Chrome浏览器42+,火狐41+,IE9+。Safari目前仍不支持cut
和copy
指令。
安装
Github:
https://github.com/zenorocha/clipboard.js
可以通过npm方式安装:
npm install clipboard --save
或者bower:
bower install clipboard --save
当然,也可以直接下载ZIP包:https://github.com/zenorocha/clipboard.js/archive/master.zip
开始使用
首先需要在页面引入:
<script src="dist/clipboard.min.js"></script>
示例
<!DOCTYPE html><head> <meta charset="UTF-8"> <title>clipboard示例</title> <script src="../dist/clipboard.min.js"></script></head><body> <!--data-clipboard-text属性的值将会被复制--> <div id="btn" class="js-copy" data-clipboard-text="我是被复制的内容啊"> <span>点击复制</span> </div> <script> var btn = document.getElementById('btn'); var clipboard = new Clipboard(btn);//实例化 //复制成功执行的回调,可选 clipboard.on('success', function(e) { console.log(e); }); //复制失败执行的回调,可选 clipboard.on('error', function(e) { console.log(e); }); </script></body></html>
点击页面的点击复制
就可以复制内容到剪切板了,console.log(e)
可以打印出里面的内容:
Object {action: "copy", text: "我是被复制的内容啊", trigger: div#btn.js-copy}
用法
从属性里复制内容
Clipboard.js使用起来非常简单,默认会复制data-clipboard-text
属性里的值,你可以把需要复制的文本放在里面。
上面我们使用document.getElementById
获取对象,还可以:
//直接通过IDvar clipboard = new Clipboard('#btn');//直接通过classvar clipboard = new Clipboard('.js-copy');//直接通过标签也可以找到var clipboard = new Clipboard('div');
对于多处需要用到复制功能的:
<div class="js-copy" data-clipboard-text="text1"><div class="js-copy" data-clipboard-text="text2"><div class="js-copy" data-clipboard-text="text3">
同样通过class
查找:
//直接通过classvar clipboard = new Clipboard('.js-copy');
我们无需去设置点击事件。
从另外一个元素复制内容
示例:
<!-- Target --><textarea id="bar">Mussum ipsum cacilds...</textarea><!-- Trigger --><button class="js-copy" data-clipboard-target="#bar">复制到剪切板</button>
上面的data-clipboard-target="#bar"
属性定义了复制时将复制id="bar"
的内容。
当然,也可以在JS里指定:
var clipboard = new Clipboard('.js-copy',{ target: function() { return document.querySelector('#bar'); }});
JS里指定复制的内容
<button class="js-copy" data-clipboard-target="#bar">复制到剪切板</button><script>var clipboard = new Clipboard('.js-copy', { text: function() { return '这里被复制的内容'; }});</script>
将直接复制text
里指定的内容。
剪切功能(cut
)
上面默认都实现了剪切功能。还可以指定是复制(copy
)还是剪切(cut
)。
在html里指定:
<button class="js-copy" data-clipboard-action="copy">复制</button><button class="js-copy" data-clipboard-action="cut">剪切</button>
通过data-clipboard-action
属性指定。
高级选项
你可以设置回调方法供Clipboard
使用:
new Clipboard('.btn', { target: function(trigger) { return trigger.nextElementSibling; }});
这里的target
接受一个回调函数。同样,text
也支持接受一个回调函数。
new Clipboard('.btn', { text: function(trigger) { return trigger.getAttribute('aria-label'); }});
清理Clipboard
对象:
var clipboard = new Clipboard('.btn');clipboard.destroy();
浏览器支持
Clipboard.js
基于 Selection 和 execCommand APIs . 第二个API仅被下面浏览器支持:
Safari目前还不支持execCommand
提供的复制/剪切
操作,包括移动端。
其它
一般建议全局初始化Clipboard
。全部使用相同的class,如.js-clipboard
。
$(function(){ /* * 复制到剪切板 * @see https://github.com/zenorocha/clipboard.js */ if(typeof Clipboard != 'function'){ return false; /*避免未引入Clipboard抛错*/ } var clipboard = new Clipboard('.js-clipboard'); clipboard.on('success', function(e) { alert('复制成功'); });});
- 纯js实现复制到剪贴板功能
- 纯js实现复制到剪贴板功能
- 纯js实现复制到剪贴板
- JS实现复制到剪贴板功能
- JS实现复制到剪贴板
- JS实现复制到剪贴板
- js实现复制到剪贴板
- js实现复制到剪贴板
- JS实现复制到剪贴板
- JS 实现复制到剪贴板
- WEB中使用JS实现复制到剪贴板功能
- js实现复制到剪贴板功能,兼容所有浏览器
- 【原】js实现复制到剪贴板功能,兼容所有浏览器
- js插件zClip实现复制到剪贴板功能
- js实现复制到剪贴板功能,兼容所有浏览器
- js实现复制到剪贴板功能,兼容所有浏览器
- 【原】js实现复制到剪贴板功能,兼容所有浏览器
- 【转】js实现复制到剪贴板功能,兼容所有浏览器
- Swift进阶笔记(一)
- 《纯干货-6》Stanford University 2017年最新《Tensorflow与深度学习实战》视频课程分享
- 利用字符串和列表将两个通讯录文本合并为一个文本
- Quest、Mission、Task——游戏中的“任务”
- Fiddler抓包使用教程-安装配置
- 纯js实现复制到剪贴板功能
- C/C++应用程序的构建过程
- C++ string格式化输出
- Inspeckage,安卓动态分析工具
- 微信 开发诡异的40029错误invalid code错误 443 failed to respond错误的解决办法
- Quartz-spring整合 静态任务
- RDD/Dataset/DataFrame互转
- Python 列表排序方法reverse、sort、sorted详解
- 关于导航视图控制器下collectionview下移的问题