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

本文将结合实例讲解如何使用一款基于jQuery的插件——Zclip来实现复制内容到剪贴板的功能。其实IE上有个方法可以实现点击复制,但是由于只是IE独有,所以我们不提倡。而Zclip是利用一个隐藏的flash文件来完成复制的功能,关键是它兼容当前各主流浏览器

HTML

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

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

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

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

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

Javascript

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

  1. $(function(){
  2. $('#copy_input').zclip({
  3. path: 'js/ZeroClipboard.swf',
  4. copy: function(){//复制内容
  5. return $('#mytext').val();
  6. },
  7. afterCopy: function(){//复制成功
  8. $("<span id='msg'/>").insertAfter($('#copy_input')).text('复制成功');
  9. }
  10. });
  11. });

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

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

如果是复制的内容来自页面元素div、p之类的,copy对象使用:

  1. copy: $('#mytext').text();

这样就完成了复制内容到剪贴板的功能。

参数说明

path:swf调用路径,必须,如js/ZeroClipboard.swf,ZeroClipboard.swf文件已存在下载包中。

copy:复制的内容,必须,任意字符串,也可以是回调函数返回的内容

beforeCopy:复制内容前回调函数,可选

afterCopy:复制内容后回调函数,可选

Zclip点击复制内容到剪贴板兼容各浏览器的更多相关文章

  1. Zclip复制页面内容到剪贴板兼容各浏览器

    Zclip:复制页面内容到剪贴板兼容各浏览器 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮 ...

  2. Zclip:复制页面内容到剪贴板兼容各浏览器

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

  3. JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

  4. JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】

    正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...

  5. 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》

    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...

  6. 点击复制文字到剪贴板兼容性安卓ios

    一般那种活动H5分享可能会用到点击复制文字到剪贴板,很简单的功能 于是搜了一搜:js复制文字到剪贴板,可用结果大致分为两类: 一类是js原生方法,这种方法兼容性不好,不兼容ios: https://d ...

  7. JavaScript复制内容到剪贴板

    移动端 需要复制内容到剪贴板时, clipborad.js 不支持ios微信版浏览器,可配合使用 execCommand 使其兼容, 完成一键复制淘口令的功能. 注意使用clipborad.js时,i ...

  8. 使用clipboard.js实现复制内容至剪贴板

    下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...

  9. js插件实现点击复制内容到粘贴板,兼容IE8

    先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...

随机推荐

  1. 怎样更好的设计你的REST API之基于REST架构的Web Service设计及REST框架实现

    一.REST 含状态传输(英文:Representational State Transfer,简称REST)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格. 眼下在 ...

  2. 深度学习笔记之使用Faster-Rcnn进行目标检测 (实践篇)

    实验 我使用的代码是Python版本的Faster Rcnn,官方也有Matlab版本的,链接如下: py-faster-rcnn(python) faster-rcnn(matlab) 环境配置 按 ...

  3. bzoj3109【CQOI2013】新数独

    3109: [cqoi2013]新数独 Time Limit: 10 Sec  Memory Limit: 128 MB Submit: 365  Solved: 229 [Submit][Statu ...

  4. 2016/4/17 去除 ul ol 前标记 list-style:none list-style-type:none

    对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

  5. 2016/4/7 datatype:①json ②XML

    ①JSON 1,postjsonxml.php     json用循环方式处理传来的值  for(key in data) for(var i=0;i<data.length;i++){data ...

  6. C++中各大有名的科学计算库

    在 C++中,库的地位是非常高的.C++之父 Bjarne Stroustrup先生多次表示了设计库来扩充功能要好过设计更多的语法的言论.现实中,C++的库门类繁多,解决 的问题也是极其广泛,库从轻量 ...

  7. tcp state

    [root@hadoop1 log]# netstatActive Internet connections (w/o servers)Proto Recv-Q Send-Q Local Addres ...

  8. VS2010调用外部webservice

    vs2010怎么调用web服务webservice方法,以vs2010为例.Vs的各个版本的此项功能操作基本一致. 工具/原料 vs2010 在“服务引用设置”对话框中,单击“添加 Web 引用”. ...

  9. h5ai目录列表优化

    h5ai是HTTP Web服务器的现代文件索引器,专注于您的文件.目录以有吸引力的方式显示,浏览它们通过不同的视图,面包屑和树状概述增强.最初,h5ai是HTML5 Apache Index的缩写,但 ...

  10. YTU 2596: 编程题B-日期格式

    2596: 编程题B-日期格式 时间限制: 1 Sec  内存限制: 128 MB 提交: 981  解决: 74 题目描述 注:本题只需要提交编写的函数部分的代码即可. 将输入的日期格式 月/日/年 ...