首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)

Posted in Javascript onJune 17, 2016

两天前听了一个H5的分享，会议上有一句话，非常有感触：不是你不能，而是你对自己的要求太低。很简单的一句话，相信很多事情不是大家做不到，真的是对自己的要求太低，如果对自己要求多一点，那么你取得的进步可能会更大。成长以来，很多朋友也听说到不少激励自己上进的话，但不是每个人都能一直坚持做下来，其实，这个跟自己的性格以及周围的环境都有很大关系，只能说多找方法、条件给自己鼓励，不断提高对自己的要求，才有机会获得多一点的成就。

今年下半年打算在组内建个叫『移动开发指南』的站点，在网站框架搭建过程，有一个功能需要实现复制文本到剪贴板，相信这个功能很常用，但是对于不常写JS代码的我来说是一个比较大的挑战，回想以前做过的一个站点，使用window.clipboardData实现复制到剪贴板功能，也仅仅支持IE和FF浏览器，当时在百度找个几个方案，看不下去就放弃了，后来在代码中做了判断，如果不支持该属性，就直接alert：此功能不支持该浏览器，请手工复制文本框中内容，现在想想真是偷懒啊，嘿嘿，有没有人中枪啊~

alert("此功能不支持该浏览器,请手工复制文本框中内容");

现在网络上其实并没有比较详细讲解js实现复制到剪贴板功能，很多文章是千遍一律，对于需要使用复制到剪贴板功能的童鞋来说，是比较蛋疼的，今天给大家带来这块的分享，由于能力有限，有错误的地方还请大家多多指教~

相信很多使用wordpress搭建过站点的同学都知道它采用了jQuery，对jQuery大家并不陌生，使用起来非常简单，可惜jQuery本身并没有实现复制到剪贴板的功能，但或许它的API会有这个功能。这次我搭建的站点采用wordpress，花了点时间搜索jQuery复制到剪贴板的API，还真的有：jQuery ZeroClipboard ，于是使用它在wordpress简单实现了复制到剪贴板的功能。但是呢，jQuery ZeroClipboard原来是有个父亲大人，叫Zero Clipboard。

Zero Clipboard作为一个独立的js库，它利用 Flash 进行复制，需要两个文件：ZeroClipboard.js 和 ZeroClipboard.swf 。网络上有2个版本，实现原理都是使用flash进行复制，不知道原创是谁的，也可能一家子的2个兄弟，这个就不管了，只要我们自己做到尊重版权，表示问心无愧，今天给大家介绍的这个版本相对来说比较简单。

首先看下图是为使用Zero Clipboard后生成的flash对象，它能兼容的flash10及以下版本，兼容所有的浏览器：

Zero Clipboard的官方地址：http://zeroclipboard.org/，github地址：https://github.com/zeroclipboard/ZeroClipboard

使用它需要搭建服务器环境，可能有同学不太清楚，关于搭建服务器环境的，方法有很多，如xp或者win7系统自带的IIS，也可以使用xampp、appserv、APMServ等集成包，安装即可，搭建起来非常简单，这里不做介绍~

现在我们先使用独立的js库Zero Clipboard简单实现复制到剪贴板功能，demo如下：

<!DOCTYPE html>
<html>
<head>
<title>Zero Clipboard Test</title>
<meta charset="utf-8">
</head>
<body>
<!--

说明：

1.data-clipboard-target 输入要复制的对象的ID

-->
<button id="d_clip_button" class="my_clip_button" data-clipboard-target="fe_text"><b>复制到剪贴板</b></button>
<br/>
<textarea id="fe_text" cols="50" rows="3">输入需要复制的内容</textarea>
</body>
</html>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
// 定义一个新的复制对象
var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {
moviePath: "ZeroClipboard.swf"
} );
// 复制内容到剪贴板成功后的操作
clip.on( 'complete', function(client, args) {
alert("复制成功，复制内容为："+ args.text);
} );
</script>

demo下载 （温馨提示：下载代码的同学，浏览demo时记得使用服务器环境，不然看不到效果的~）

上面代码注释中已经对Zero Clipboard的功能进行了介绍，需要了解更多的功能请到https://github.com/zeroclipboard/ZeroClipboard

接下来介绍jQuery ZeroClipboard

jQuery ZeroClipboard是在ZeroClipboard的基础上进行的改良，简称zClip，作为jQuery的API，jQuery ZeroClipboard也表现的非常简易操作，官方地址：http://www.steamdev.com/zclip/

使用前需引用2个js文件：jquery.js和jquery.zclip.js

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zclip.js"></script>

现在我们使用jquery.zclip.js简单实现复制到剪贴板功能demo如下：

<!DOCTYPE html>
<html>
<head>
<title>ZeroClipboard Test</title>
<meta charset="utf-8">
<style type="text/css">
.line{margin-bottom:20px;}
/* 复制提示 */
.copy-tips{position:fixed;z-index:999;bottom:50%;left:50%;margin:0 0 -20px -80px;background-color:rgba(0, 0, 0, 0.2);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);padding:6px;}
.copy-tips-wrap{padding:10px 20px;text-align:center;border:1px solid #F4D9A6;background-color:#FFFDEE;font-size:14px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.zclip.js"></script>
</head>
<body>
<div class="line">
<h2>demo1 点击复制当前文本</h2>
<a href="#none" class="copy">点击复制我</a>
</div>
<div class="line">
<h2>demo2 点击复制表单中的文本</h2>
<a href="#none" class="copy-input">点击复制单中的文本</a>
<input type="text" class="input" value="输入要复制的内容" />
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
/* 定义所有class为copy标签，点击后可复制被点击对象的文本 */
$(".copy").zclip({
path: "ZeroClipboard.swf",
copy: function(){
return $(this).text();
},
beforeCopy:function(){/* 按住鼠标时的操作 */
$(this).css("color","orange");
},
afterCopy:function(){/* 复制成功后的操作 */
var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>☺ 复制成功</div></div>");
$("body").find(".copy-tips").remove().end().append($copysuc);
$(".copy-tips").fadeOut(3000);
}
});
/* 定义所有class为copy-input标签，点击后可复制class为input的文本 */
$(".copy-input").zclip({
path: "ZeroClipboard.swf",
copy: function(){
return $(this).parent().find(".input").val();
},
afterCopy:function(){/* 复制成功后的操作 */
var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>☺ 复制成功</div></div>");
$("body").find(".copy-tips").remove().end().append($copysuc);
$(".copy-tips").fadeOut(3000);
}
});
});
</script>

demo下载 （温馨提示：下载代码的同学，浏览demo时记得使用服务器环境，不然看不到效果的~）

上面代码中结合jQuery的操作节点的功能，出色的发挥jquery.zclip.js的作用，如复制前后的操作，动态插入节点，也可见jquery.zclip.js的强大之处，使用起来是非常简单。需要深入了解更多jquery.zclip.js的功能请到http://www.steamdev.com/zclip/

从上面独立的js库ZeroClipboard.js和jquery.zclip.js 都是采用flash实现实现复制到剪贴板的功能，可以看出，使用ZeroClipboard.js带来功能相对比较少，不过它是独立的库，文件比较小，而使用jquery.zclip.js后的功能是比较丰富，不过对于不使用jQuery框架的站点来说，采用jquery.zclip.js是比较浪费宽带。使用哪种复制方式还是得看产品的具体定位情况~

以上所述是小编给大家介绍的JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)

- Author -

白树

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
JavaScript高级程序设计 阅读笔记（十三） js定义类或对象
Aug 14 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 #Javascript
JavaScript简单实现弹出拖拽窗口（二）
Jun 17 #Javascript
JS中递归函数
Jun 17 #Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 #Javascript
JavaScript简单实现弹出拖拽窗口（一）
Jun 17 #Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 #Javascript
聊一聊JS中this的指向问题
Jun 17 #Javascript
数据库卡死(1) 限速(1) update(2) 全局锁(1) 德生2P3(1) 索尼ICF-36(1) IP(1) 备份(2) 索引(8) tcp/ip(1)
You might like
thinkphp配置连接数据库技巧
2014/12/02 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
jquery等待效果示例
2014/05/01 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
js编写选项卡效果
2017/05/23 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
Python开发编码规范
2006/09/08 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Python如何使用函数做字典的值
2019/11/30 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
我的applet原先好好的, 一放到web server就会有问题，为什么？
2016/05/10 面试题
给定一个时间点，希望得到其他时间点
2013/11/07 面试题
教师自荐信
2013/12/10 职场文书
大学生秋游活动方案
2014/02/17 职场文书
竞聘书怎么写，如何写？
2014/03/31 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
pt-archiver 主键自增
2022/04/26 MySQL