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 相关文章推荐
javascript中Function类型详解
Apr 28 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
微信小程序之购物车功能
Sep 23 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
Angularjs的启动过程分析
Jul 18 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 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
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
Python 多进程和数据传递的理解
2017/10/09 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
flask中的wtforms使用方法
2018/07/21 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
python的setattr函数实例用法
2020/12/16 Python
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
英文翻译的自我评价语句
2013/10/04 职场文书
酒店前台接待岗位职责
2013/12/03 职场文书
大型营销活动计划书
2014/04/28 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
教师节慰问信
2015/02/15 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
人事任命通知书
2015/04/21 职场文书
Python 语言实现六大查找算法
2021/06/30 Python
详细了解java监听器和过滤器
2021/07/09 Java/Android
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python