首页
所有分类
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 相关文章推荐
关于全局变量和局部变量的那些事
Jan 11 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 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
el-table(1) TableField(1) Next.js(1) create(1) Mybatis-Plus(3) nginx(76) 日志格式分析(1) 子查询(1) mounted(1) 脚手架(2)
You might like
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
django 自定义用户user模型的三种方法
2014/11/18 Python
Python多线程、异步＋多进程爬虫实现代码
2016/02/17 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
python调用百度语音识别api
2018/08/30 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
python用match()函数爬数据方法详解
2019/07/23 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
自我鉴定200字
2013/10/28 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
车队安全员岗位职责
2015/02/15 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python