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图片向右一张张滚动效果实例代码
Nov 23 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
JavaScript 函数的执行过程
May 09 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
Layui数据表格之单元格编辑方式
Oct 26 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
脚本收藏iframe
2006/07/21 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
py2exe 编译ico图标的代码
2013/03/08 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
浅析PEP572: 海象运算符
2019/10/15 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
django正续或者倒序查库实例
2020/05/19 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
python中的错误如何查看
2020/07/08 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
公司拓展活动方案
2014/02/13 职场文书
安全标准化实施方案
2014/02/20 职场文书
服务宗旨标语
2014/07/01 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
详解Python requests模块
2021/06/21 Python
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
分享3个非常实用的 Python 模块
2022/03/03 Python
Python Pandas 删除列操作
2022/03/16 Python
MySQL 计算连续登录天数
2022/05/11 MySQL