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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
javascript的BOM汇总
Jul 16 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 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 按位与或 (^ 、&amp;)
2013/06/21 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
parser.add_argument中的action使用
2020/04/20 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
百度JavaScript笔试题
2015/01/15 面试题
中专毕业生个人职业生涯规划
2014/02/19 职场文书
社区服务标语
2014/07/01 职场文书
标准单位租车协议书
2014/09/23 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
2014小学年度工作总结
2014/12/20 职场文书
演讲比赛主持词
2015/06/29 职场文书
关爱空巢老人感想
2015/08/11 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android