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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
JS常用表单验证方法总结
May 22 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
Vue动态组件实例解析
Aug 20 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
vue-cli常用设置总结
Feb 24 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
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
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHP学习之整理字符串
2011/04/17 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
使用python实现rsa算法代码
2016/02/17 Python
python dict 相同key 合并value的实例
2019/01/21 Python
int在python中的含义以及用法
2019/06/27 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
数控专业毕业生求职信范文
2013/09/21 职场文书
打架检讨书400字
2014/01/17 职场文书
收银员岗位职责
2014/02/07 职场文书
保安公司服务承诺书
2014/05/28 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书