JQuery zClip插件实现复制页面内容到剪贴板


Posted in Javascript onNovember 02, 2015

相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要。

最终效果:

JQuery zClip插件实现复制页面内容到剪贴板

JQuery zClip插件实现复制页面内容到剪贴板

网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的。去看了几个常用的网站,都是用的透明flash遮挡“复制到剪贴板”按钮,所以当你点击“复制到剪贴板”的时候,点击的其实是flash,然后把你需要复制的内容传入到了flash,然后在通过flash的复制功能把传入的内容复制到了剪贴板。
加载JQuery库和zclip插件

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

下面是一个小demo,主要是复制文本框中的链接到剪贴板。
HTML

<input type="text" value="3water.com" id="link"> 
<span id="copyBtn">复制链接</span>

然后加入脚本

<script> 
    $('#copyBtn').zclip({ 
      path: "ZeroClipboard.swf", 
      copy: function(){ 
        return $('#link').val(); 
   
} 
    }); 
</script>

然后就可以直接打开网页测试了,这只是一个简单的小应用,希望大家可以迅速掌握。

Javascript 相关文章推荐
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
vue 全局环境切换问题
Oct 27 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
jquery实现简洁文件上传表单样式
Nov 02 #Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 #Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 #Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 #Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 #Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 #Javascript
18个非常棒的jQuery代码片段
Nov 02 #Javascript
You might like
十天学会php(3)
2006/10/09 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
php7下的filesize函数
2019/09/30 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
详解VUE 数组更新
2017/12/16 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
AngularJS上传文件的示例代码
2018/11/10 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
python控制台中实现进度条功能
2015/11/10 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python探索之SocketServer详解
2017/10/28 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
一道Delphi面试题
2016/10/28 面试题
大学专科生推荐信范文
2013/11/23 职场文书
优秀护士获奖感言
2014/02/20 职场文书
小学二年级评语
2014/04/21 职场文书
家长会标语
2014/06/24 职场文书
农村文化活动总结
2014/08/28 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android