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 相关文章推荐
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
详细分析vue响应式原理
Jun 22 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 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计算整个目录大小的方法
2015/06/19 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
js的对象与函数详解
2019/01/21 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
Python编写百度贴吧的简单爬虫
2015/04/02 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
高分子材料个人求职信范文
2013/09/25 职场文书
怎样有效的进行自我评价
2013/10/06 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
幼儿园课题方案
2014/06/09 职场文书
创先争优个人承诺书
2014/08/30 职场文书
信仰心得体会
2014/09/05 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
试用期自我评价范文
2015/03/10 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python