用clipboard.js实现纯JS复制文本到剪切板
以前很多人都是用ZeroClipboard.js来实现网页复制内容,火端也是用它。ZeroClipboard是利用flash来实现的,ZeroClipboard兼容性很好,但是由于现在越来越多的浏览器不支持flash,导致一些没法正常使用了。
今天火端开始使用clipboard.js来复制网页文本内容了,clipboard.js不需要flash,也不依赖其它的js库,min版仅11KB,GZIP压缩后仅3KB,非常的小巧。
使用起来也非常的简单,代码如下:
<input id="foo" value="这里是内容">
<button class="btn" data-clipboard-target="#foo">点击复制</button>
<script src="dist/clipboard.min.js"></script>
<script>
new Clipboard('.btn');//首先需要您需要通过传递DOM选择器,HTML元素或HTML元素列表来实例化它。
<script>
如果要添加事件,可以这样:
<input id="foo" value="这里是内容">
<button class="btn" data-clipboard-target="#foo">点击复制</button>
<script src="dist/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
alert("复制成功!");
e.clearSelection();
});
clipboard.on('error', function(e) {
alert("复制失败!");
});
<script>
支持的浏览器如下:
还有更多例子以及下载请看官网:https://clipboardjs.com/
或者直接下载:https://github.com/zenorocha/clipboard.js/archive/master.zip
本文地址:https://www.huoduan.com/clipboardjs.html
本文作者:火端网络,转载请务必以超链接形式注明出处。
clipboard.js基本使用:http://www.jianshu.com/p/3f8867de041e
用clipboard.js实现纯JS复制文本到剪切板的更多相关文章
- js兼容安卓和IOS的复制文本到剪切板
1.在做点击按钮复制功能时遇到了小小的卡顿,此处遇到了两种系统手机的兼容性 / 复制后会对文本进行选中 / 输入法弹出 等.现将方法进行总结,如下代码很好对解决了以上问题,适用性强. 2.在文本此处使 ...
- HTML5 完美解决javascript中iphone手机和android手机复制文本到剪切板问题
1.执行以下解决方案条件:(这个是原理) ①执行复制方法时 所复制文字不能被任何 块级元素和行内块元素和行内元素遮盖否则无效:(解决方案:将文本通过绝对定位或其他方式移除屏幕外) ②ios中不能复制属 ...
- jquery 一键复制文本到剪切板
<a id="copy" data-clipboard-text="123456">复制文本</a> $(function(){ var ...
- JS复制文本到剪切板
1.首先引入js文件, <script src="dist/clipboard.min.js"></script> 2.初始化 <script typ ...
- vue 复制文本到剪切板上
1.下载clipboard.js npm install vue-clipboard2 --save 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 import Clipboard ...
- jquery 复制文本到剪切板插件(非 flash)
原创插件,转载请声明出处!!! jquery.copy.js 内容如下: /*! * jQuery Copy Plugin * version: 1.0.0-2018.01.23 * Requires ...
- Unity3d 复制文字到剪切板及存储图像到相册
游戏中里开发分享功能时用到两个小功能:1.复制一个链接到剪切板供在其他应用粘贴分享使用,2.保存一张二维码图像到相册供发送给其他应用用于分享.但是在unity中无法完成,需要分别开发相应的插件. An ...
- Clipboard.js – 现代方式实现复制文本到剪贴板
复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...
- js 实现点击复制文本内容
js 实现点击复制文本内容 <table> <tr><td>姓名:<span onclick="copyContent(this);" ...
随机推荐
- Java对象转换成xml对象和Java对象转换成JSON对象
1.把Java对象转换成JSON对象 apache提供的json-lib小工具,它可以方便的使用Java语言来创建JSON字符串.也可以把JavaBean转换成JSON字符串. json-lib的核心 ...
- 项目管理: Alpha,Beta,RC,GA,Release
Alpha: Alpha是内部测试版,一般不向外部发布.也可以认为是演示版本.允许存在一定的问题(例如功能组合.异常流程处理.稳定性.性能存在部分问题) ...
- MyBatis 批量操作、集合遍历-foreach
在使用mybatis操作数据库时,经常会使用到批量插入.IN条件查询的情况,这时就难免要使用到foreach元素.下面一段话摘自mybatis官网: foreach 元素的功能是非常强大的,它允许你指 ...
- intelliJ IDEA自动优化导入包设置
Settings→Editor→General→Auto Import 选中Optimize imports on the fly和Add unambiguous imports on the fly ...
- .net WCF简单实例
最近看到网上招聘有许多都需要WCF技术的人员,我之前一直没接触过这个东西,以后工作中难免会遇到,所谓笨鸟先飞,于是我就一探究竟,便有了这边文章.由于是初学WCF没有深入研究其原理,只是写了一个demo ...
- gcc编译相关tips
http://blog.csdn.net/benpaobagzb/article/details/51364005 静态库链接时搜索路径顺序: ld会去找GCC命令中的参数-L 再找gcc的环境变量L ...
- Spark配置参数优先级
1.Properties set directly on the SparkConf take highest precedence, 2.then flags passed to spark-sub ...
- 用户信息文件/etc/passwd,影子文件/etc/shadow,组信息文件/etc/group,组密码文件/etc/gshadow,用户管理相关文件
/etc/passwd man 5 passwd查看配置文件信息 account:password:UID:GID:GECOS:directory:shell 帐号:密码:用户ID:组ID:一般的信息 ...
- Noip2016换教室(期望+DP)
Description 题目链接:Luogu Solution 这题结合了DP和概率与期望,其实只要稍微知道什么是期望就可以了, 状态的构造很关键,\(F[i][j][0/1]\)表示已经到第\(i\ ...
- CET-4- translation1
questions 2017/10/17 多年来,家长和老手都曾得到过这样一种信息(message):尽量利用任何机会表扬孩子,对他们所干的任何事情都要说好.据说这样做有助于提高孩子的自尊.但是近来许 ...