Zclip点击复制内容到剪贴板兼容各浏览器
WEB开发中,要让用户复制页面中的一段代码、URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方。
本文将结合实例讲解如何使用一款基于jQuery的插件——Zclip来实现复制内容到剪贴板的功能。其实IE上有个方法可以实现点击复制,但是由于只是IE独有,所以我们不提倡。而Zclip是利用一个隐藏的flash文件来完成复制的功能,关键是它兼容当前各主流浏览器。
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:复制内容后回调函数,可选
Zclip点击复制内容到剪贴板兼容各浏览器的更多相关文章
- Zclip复制页面内容到剪贴板兼容各浏览器
Zclip:复制页面内容到剪贴板兼容各浏览器 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮 ...
- Zclip:复制页面内容到剪贴板兼容各浏览器
WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...
- JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)
现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...
- JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】
正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...
- 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》
前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...
- 点击复制文字到剪贴板兼容性安卓ios
一般那种活动H5分享可能会用到点击复制文字到剪贴板,很简单的功能 于是搜了一搜:js复制文字到剪贴板,可用结果大致分为两类: 一类是js原生方法,这种方法兼容性不好,不兼容ios: https://d ...
- JavaScript复制内容到剪贴板
移动端 需要复制内容到剪贴板时, clipborad.js 不支持ios微信版浏览器,可配合使用 execCommand 使其兼容, 完成一键复制淘口令的功能. 注意使用clipborad.js时,i ...
- 使用clipboard.js实现复制内容至剪贴板
下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...
- js插件实现点击复制内容到粘贴板,兼容IE8
先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...
随机推荐
- 怎样更好的设计你的REST API之基于REST架构的Web Service设计及REST框架实现
一.REST 含状态传输(英文:Representational State Transfer,简称REST)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格. 眼下在 ...
- 深度学习笔记之使用Faster-Rcnn进行目标检测 (实践篇)
实验 我使用的代码是Python版本的Faster Rcnn,官方也有Matlab版本的,链接如下: py-faster-rcnn(python) faster-rcnn(matlab) 环境配置 按 ...
- bzoj3109【CQOI2013】新数独
3109: [cqoi2013]新数独 Time Limit: 10 Sec Memory Limit: 128 MB Submit: 365 Solved: 229 [Submit][Statu ...
- 2016/4/17 去除 ul ol 前标记 list-style:none list-style-type:none
对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...
- 2016/4/7 datatype:①json ②XML
①JSON 1,postjsonxml.php json用循环方式处理传来的值 for(key in data) for(var i=0;i<data.length;i++){data ...
- C++中各大有名的科学计算库
在 C++中,库的地位是非常高的.C++之父 Bjarne Stroustrup先生多次表示了设计库来扩充功能要好过设计更多的语法的言论.现实中,C++的库门类繁多,解决 的问题也是极其广泛,库从轻量 ...
- tcp state
[root@hadoop1 log]# netstatActive Internet connections (w/o servers)Proto Recv-Q Send-Q Local Addres ...
- VS2010调用外部webservice
vs2010怎么调用web服务webservice方法,以vs2010为例.Vs的各个版本的此项功能操作基本一致. 工具/原料 vs2010 在“服务引用设置”对话框中,单击“添加 Web 引用”. ...
- h5ai目录列表优化
h5ai是HTTP Web服务器的现代文件索引器,专注于您的文件.目录以有吸引力的方式显示,浏览它们通过不同的视图,面包屑和树状概述增强.最初,h5ai是HTML5 Apache Index的缩写,但 ...
- YTU 2596: 编程题B-日期格式
2596: 编程题B-日期格式 时间限制: 1 Sec 内存限制: 128 MB 提交: 981 解决: 74 题目描述 注:本题只需要提交编写的函数部分的代码即可. 将输入的日期格式 月/日/年 ...