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 相关文章推荐
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
js+css实现导航效果实例
Feb 10 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
angular4实现带搜索的下拉框
Mar 25 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中Session的概念
2006/10/09 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
php class类的用法详细总结
2013/10/17 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
实例浅析js的this
2016/12/11 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
Python中正则表达式详解
2017/05/17 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
Python实现DDos攻击实例详解
2019/02/02 Python
详解python中list的使用
2019/03/15 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
电大毕业生自我鉴定
2013/11/10 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
2014年高考决心书
2014/03/11 职场文书
网络宣传方案
2014/03/15 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
javascript canvas实现雨滴效果
2021/06/09 Javascript
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸