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 load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
javascript实现在线客服效果
Jul 15 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
微信小程序 冒泡事件原理解析
Sep 27 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程序--记数器
2006/10/09 PHP
收集的php编写大型网站问题集
2007/03/06 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
解析php取整的几种方式
2013/06/25 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
vue组件生命周期详解
2017/11/07 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
python tqdm库的使用
2020/11/30 Python
应届生会计求职信
2013/11/11 职场文书
感谢信怎么写
2015/01/21 职场文书
红色电影观后感
2015/06/18 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python
使用Java去实现超市会员管理系统
2022/03/18 Java/Android