jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板


Posted in Javascript onApril 30, 2015

WEB开发中,要让用户复制页面中的一段代码、URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方。

jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

HTML

首先需要在页面中载入jquery库和zclip插件,这两个文件已经打好包,欢迎点击下载。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>

接着我们在页面中的body部分加入如下代码:

<textarea id="mytext">请输入内容</textarea><br/> 
<a href="#" id="copy_input" class="copy">复制内容</a>

 页面中放置了一个输入框textarea,当然也可以是其他html元素,然后就是一个复制按钮,也可以是链接文本形式。

Javascript

当点击“复制内容”时,调用zclip插件,并提示复制成功,请看代码:

$(function(){ 
  $('#copy_input').zclip({ 
    path: 'js/ZeroClipboard.swf', 
    copy: function(){//复制内容 
      return $('#mytext').val(); 
    }, 
    afterCopy: function(){//复制成功 
      $("<span id='msg'/>").insertAfter($('#copy_input')).text('复制成功'); 
    } 
  }); 
});

值得注意的是如果是复制的内容来自输入框input、textarea等,copy对象使用:

copy: function(){ 
  return $('#mytext').val(); 
}

如果是复制的内容来自页面元素div、p之类的,copy对象使用:
copy: $('#mytext').text();
这样就完成了复制内容到剪贴板的功能。
参数说明
path:swf调用路径,必须,如js/ZeroClipboard.swf,ZeroClipboard.swf文件已存在下载包中。
copy:复制的内容,必须,任意字符串,也可以是回调函数返回的内容
beforeCopy:复制内容前回调函数,可选
afterCopy:复制内容后回调函数,可选

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 #Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 #Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 #Javascript
jquery实现键盘左右翻页特效
Apr 30 #Javascript
jquery Validation表单验证使用详解
Sep 12 #Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 #Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 #Javascript
You might like
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
php常用hash加密函数
2014/11/22 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
angular4自定义组件详解
2017/09/28 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Python中的localtime()方法使用详解
2015/05/22 Python
Python的argparse库使用详解
2018/10/09 Python
Python 使用多属性来进行排序
2019/09/01 Python
python中数据库like模糊查询方式
2020/03/02 Python
Python中格式化字符串的四种实现
2020/05/26 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
村委会主任先进事迹
2014/01/15 职场文书
机关党员公开承诺书
2014/08/30 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
旷课检讨书500字
2014/10/14 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
2014年店长工作总结
2014/11/17 职场文书
赔偿协议书
2015/01/27 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
vue如何清除浏览器历史栈
2022/05/25 Vue.js
netty 实现tomcat的示例代码
2022/06/05 Servers