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实现图片的前进与后退功能
Apr 24 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
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
搜索引擎技术核心揭密
2006/10/09 PHP
在PHP中使用模板的方法
2008/05/24 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
javascript学习网址备忘
2007/05/29 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python的类实例属性访问规则探讨
2015/01/30 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
详解Python self 参数
2019/08/30 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
社区消防工作实施方案
2014/03/21 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书