文档章节

兼容性良好的js一键复制

bothyan
 bothyan
发布于 2015/10/15 16:26
字数 384
阅读 2558
收藏 14

       实现js一键复制原生方法里有window.clipboardData.setData,用这个方法并不兼容,只能用于IE浏览器,在别的浏览器中只能让用户手动复制。具体使用如下:

window.clipboardData.setData("Text","你要复制的内容");

       网上有很多用ZeroClipboard,用flash实现一键复制的兼容,但是复制粘贴这样的小功能可以不需要依赖flash或其他臃肿的框架。

       这里主要介绍下clipboard的使用,地址:https://github.com/zenorocha/clipboard.js.git

       引入js文件clipboard.min.js。

<body>    
<!-- Target -->
<input id="target" value="你要复制的内容">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#target">一键复制</button>
<script>
var clipboard = new Clipboard('.btn');
</script>
</body>

上述代码就可以完成一键复制的功能,点击button复制input的值。本人测试若input隐藏就无法复制。当我们要复制不需要显示的文本时。如下

<body>    
<!-- Target -->

<!-- Trigger -->
<button class="btn" data-clipboard-text="">一键复制</button>
<script>
var clipboard  = new Clipboard('.btn',{
    		text:function(trigger) {
		        return "你要复制的内容";
		    }	
    	});
</script>
</body>

在new Clipboard构造函数里,除了像上面函数那样加text属性(目标函数返回要复制的内容)外,还可以加target属性,目标函数返回的是dom节点。这些需要在类名为btn的button上加入data-clipboard-text或者data-clipboard-target属性。

       此外clipboard也提供了一些回调函数,成功和失败的回调如下:

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);
      e.clearSelection();
});

© 著作权归作者所有

bothyan
粉丝 10
博文 29
码字总数 12605
作品 0
海淀
程序员
私信 提问
clipboard.js实现一键复制功能

问题 做项目的时候,需要用到一键点击实现复制文本的功能,所以就针对于复制这一块做了研究,那么究竟如何能实现这个功能呢? 解决方案 经过多番搜索和尝试,发现大多数复制技术的浏览器兼容...

捷搜索
2018/10/31
0
0
几维安全Javascript代码混淆(js加密)在线使用说明

几维安全Javascript代码混淆是一项在线加密服务,用户只需将JS文件打包成zip包,提交到加密平台,即可完成代码混淆、字符串加密、属性加密、调用转换等多项保护措施,提高攻击者分析Javascr...

工作的事
2018/07/17
53
0
【北京】招聘前端制作 猎头

【北京】招聘前端制作 职位:前端制作 职位描述: 1.负责公司网站类产品的前端开发工作; 2.运用 div+css 进行网页布局制作; 3.常规JS的编写工作; 4.处理日常工作中的一些页面BUG及调整工...

freya8688
2012/03/27
107
2
River Trail 为 Javascript 带来并行编程特性

英特尔宣布了扩展JavaScript并行编程功能的开源项目River Trail。 浏览器不再只执行轻量级的任务,然而高计算量的应用程序却仍须原生执行,因为原生应用有性能优势,如它可以充分利用多核处理...

红薯
2011/09/21
925
0
上海足智网络招聘***PHP,JS,QA***工程师(5k~10k)

本人是该网站技术总监,招人不易,亲自上阵,期遇良才。 上海足智网络科技是一家从事团购业务的互联网公司,公司网址为: http://gtuan.com, 于10年11月份正式上线运营,至今已逾半年,目前处...

偶是麦兜
2011/05/03
407
8

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
15
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
17
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部