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 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
使用node.js搭建服务器
May 20 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
解决vue-router路由拦截造成死循环问题
Aug 05 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 Switch 语句之学习笔记
2013/09/21 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
详解python3中zipfile模块用法
2018/06/18 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
使用Python发现隐藏的wifi
2020/03/04 Python
params有什么用
2016/03/01 面试题
数字天堂软件测试面试题
2012/12/23 面试题
个人生活学习自我评价范文
2013/11/26 职场文书
关于毕业的广播稿
2014/01/10 职场文书
上课迟到检讨书
2014/01/19 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
计划生育标语
2014/06/23 职场文书
共青团员自我评价范文
2014/09/14 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
春风化雨观后感
2015/06/11 职场文书
军训通讯稿范文
2015/07/18 职场文书
运动会开幕式致辞
2015/07/29 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
Python中re模块的元字符使用小结
2022/04/07 Python
Mysql中常用的join连接方式
2022/05/11 MySQL