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实现复制内容到剪贴板功能兼容所有浏览器(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
JavaScript实现商品评价五星好评
Nov 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
You might like
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
js传值 判断
2006/10/26 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
微信小程序自定义组件
2017/08/16 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
vue实现分页组件
2020/06/16 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Windows下python3.6.4安装教程
2018/07/31 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
python 串行执行和并行执行实例
2020/04/30 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
苹果香港官方商城:Apple香港
2016/09/14 全球购物
小学数学教研活动总结
2014/07/01 职场文书
销售人员工作自我评价
2014/09/21 职场文书
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android