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实现控制台控件的代码
Sep 04 Javascript
JQuery 学习笔记 element属性控制
Jul 23 Javascript
Mootools 1.2教程 事件处理
Sep 15 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
过滤器vue.filters的使用方法实现
Sep 18 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
第五节 克隆 [5]
2006/10/09 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
Python脚本获取操作系统版本信息
2016/12/17 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
我就是这样学习Python中的列表
2019/06/02 Python
python适合人工智能的理由和优势
2019/06/28 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
精选干货:Java精选笔试题附答案
2014/01/18 面试题
实习公司领导推荐函
2014/05/21 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书