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 相关文章推荐
js技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
JavaScript find()方法及返回数据实例
Apr 30 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
500行python代码实现飞机大战
2020/04/24 Python
通过自学python能找到工作吗
2020/06/21 Python
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
标准化管理实施方案
2014/02/25 职场文书
植树节活动总结
2014/04/30 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
团队精神的演讲稿
2014/05/14 职场文书
个性车贴标语
2014/06/24 职场文书
检讨书怎么写
2015/05/07 职场文书
小学运动会加油稿
2015/07/22 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS