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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 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开发的一些注意点总结
2010/10/12 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
php实现的简单日志写入函数
2015/03/31 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
简单的js分页脚本
2009/05/21 Javascript
学习ExtJS accordion布局
2009/10/08 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
react MPA 多页配置详解
2019/10/18 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Python实现的简单万年历例子分享
2014/04/25 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python入门教程 python入门神图一张
2018/03/05 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
我为自己代言广告词
2014/03/18 职场文书
学生逃课检讨书
2015/02/17 职场文书
Python机器学习之逻辑回归
2021/05/11 Python
分析并发编程之LongAdder原理
2021/06/29 Java/Android