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 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 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中几种常见安全设置详解
2010/04/06 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
js Function类型
2011/12/04 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
实用的Vue开发技巧
2019/05/30 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
Python数据库小程序源代码
2019/09/15 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
安全资料员岗位职责
2013/12/14 职场文书
科研先进个人典型材料
2014/01/31 职场文书
营销总经理岗位职责
2014/02/02 职场文书
优秀部门获奖感言
2014/02/14 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
医院志愿者活动总结
2015/05/06 职场文书
工作服管理制度范本
2015/08/06 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
python基础之函数的定义和调用
2021/10/24 Python
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server