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 相关文章推荐
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
vue项目中在可编辑div光标位置插入内容的实现代码
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
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
php 常用的系统函数
2017/02/07 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
深入理解python函数递归和生成器
2016/06/06 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
纽约海:Sea New York
2018/11/04 全球购物
财务主管自我鉴定
2014/01/17 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
村干部任职承诺书
2015/01/21 职场文书
资料员岗位职责
2015/02/10 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
golang实现浏览器导出excel文件功能
2022/03/25 Golang