jQuery实现复制到粘贴板功能


Posted in Javascript onFebruary 11, 2017

项目中突然需要使用复制功能,在网上搜索了下看到了ZeroClipboard插件,好用,但是也有局限。用法如下:

1、引用jquery、zclip.js、swf文件。

demo地址:https://github.com/chaoli920029342/jquery_copy

2、初始化

<body>
<input type="text" name="text" id="text" value="http://www.baidu.com" />
<a href="javascript:void(0)" rel="external nofollow" id="dynamic">复制</a>
<script type="text/javascript">
$(document).ready(function(){
 $("#dynamic").zclip({
  path:'ZeroClipboard.swf',
  copy:$('#text').val(),
  beforeCopy:function(){
   //some code
  },
  afterCopy:function(){
   alert($("#text").val());
  }
 });
 //beforeCopy afterCopy 是可选项
});
</script>
</body>

注:

1、需在服务器上运行 localhost

2、js+swf实现,文件需要同时引入。 ZeroClipboard提供一个透明的flash,用于和剪切版交互,当点击页面上的“复制”按钮时,将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板。 需保证该flash被正确加载即可。

3、可兼容各大浏览器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
js实现PC端和移动端刮卡效果
Mar 27 #Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 #Javascript
BootStrap select2 动态改变值的方法
Feb 10 #Javascript
angularjs实现的前端分页控件示例
Feb 10 #Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 #Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 #Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 #Javascript
You might like
用PHP实现维护文件代码
2007/06/14 PHP
帝国cms目录结构分享
2015/07/06 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
Python中str.format()详解
2017/03/12 Python
python远程连接MySQL数据库
2019/04/19 Python
Python logging设置和logger解析
2019/08/28 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
暑假实习求职信范文
2013/09/22 职场文书
慈善晚会策划方案
2014/05/14 职场文书
党员服务承诺书
2014/05/28 职场文书
学生党员公开承诺书
2014/05/28 职场文书
广播体操比赛口号
2014/06/10 职场文书
地理科学专业自荐信
2014/09/01 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
工作失职检讨书
2015/01/26 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
员工升职自我评价
2019/03/26 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书