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 相关文章推荐
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
js实现数组转换成json
Jun 26 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 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中PDO基础教程 入门级
2011/09/04 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
python复制与引用用法分析
2015/04/08 Python
python中requests和https使用简单示例
2018/01/18 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
详解Python设计模式之策略模式
2020/06/15 Python
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
电子商务应届生自我鉴定
2014/01/13 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
2014年人事部工作总结
2014/12/03 职场文书
2015年实习单位评语
2015/03/25 职场文书
小组组名及励志口号
2015/12/24 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers