相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要。

网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的。去看了几个常用的网站,都是用的透明flash遮挡“复制到剪贴板”按钮,所以当你点击“复制到剪贴板”的时候,点击的其实是flash,然后把你需要复制的内容传入到了flash,然后在通过flash的复制功能把传入的内容复制到了剪贴板。

加载JQuery库和zclip插件

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

下面是一个小demo,主要是复制文本框中的链接到剪贴板。

HTML

  1. <input type="text" value="www.baidu.com" id="link">
  2. <span id="copyBtn">复制链接</span>

然后加入脚本

  1. <script>
  2. $('#copyBtn').zclip({
  3. path: "ZeroClipboard.swf",
  4. copy: function(){
  5. return $('#link').val();
  6.       }
  7. });
  8. </script>

然后就可以直接打开网页测试了。这只是一个简单的小应用。

兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能的更多相关文章

  1. 【转载】兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

    文章转载自 代码家园 http://www.daimajiayuan.com/ 原文链接:http://www.daimajiayuan.com/sitejs-17973-1.html原文摘要: 相信 ...

  2. 解决jquery zclip 插件点击无效的问题

    使用jquery zclip 用于页面复制文本内容. 首先引入js <script type="text/javascript" src="../js/jquery ...

  3. 【转】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  4. 【转】js插件zClip实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

  5. 【原】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  6. 黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  7. js插件zClip实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

  8. Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能

    开发中经常会用到复制的功能,在 IE 下实现比较简单,但要想做到跨浏览器比较困难了. 本文将介绍一个跨浏览器的库类 Zero Clipboard ,它利用 Flash 进行复制,所以只要浏览器装有 F ...

  9. JQuery实现复制到剪贴板功能

    在网页中实现复制到剪贴板功能,有两种方法, 第1种方法:使用JavaScript自带的方法,但是这种方法只能在IE下使用. document.execCommand("Copy") ...

随机推荐

  1. VmWare问题解决(网络变更后虚拟主机无法上网)

    安装 Vmware,并新建一个虚拟机后,当时做好配置(NAT模式)后,虚拟机能够正常上网. 然后将电脑带到另一个地理位置办公时,却无法上网. 本篇探讨问题的缘由和几种解决方式. 一.缘由解析 仅探讨上 ...

  2. bzoj1978

    朴素的算法是O(n2logn)观察这个算法,似乎很难在进行优化我们就要换一种思路考虑到一个数的约数总不是很多,穷举约数也是可以在O(sqrt(x))的时间内完成的并且注意到,能否继续往下选数,只在于最 ...

  3. (转载)HTML标签<br><br/>的区别在哪里?

    (转载)http://zhidao.baidu.com/question/259205863.html HTML标签<br><br/>的区别在哪里? 如果一样为什么还要分2个标 ...

  4. 斜率优化(CDQ分治,Splay平衡树):BZOJ 1492: [NOI2007]货币兑换Cash

    Description Input 第一行两个正整数N.S,分别表示小Y 能预知的天数以及初始时拥有的钱数. 接下来N 行,第K 行三个实数AK.BK.RateK,意义如题目中所述 Output 只有 ...

  5. 从字符串总分离文件路径、命名、扩展名,Substring(),LastIndexOf()的使用;替换某一类字符串,Replace()的用法

    一:从字符串总分离文件路径.命名.扩展名,上图 二:代码 using System; using System.Collections.Generic; using System.ComponentM ...

  6. C语言赋值运算符

    赋值运算符: 分类: 简单赋值 int a ;  a=10; 复合运算符 int a ;  a+=4; 复合位运算符 int a; a&=1:

  7. HDOJ 2021 发工资咯:)(利用了一种取余的思想)

    Problem Description 作为杭电的老师,最盼望的日子就是每月的8号了,因为这一天是发工资的日子,养家糊口就靠它了,呵呵 但是对于学校财务处的工作人员来说,这一天则是很忙碌的一天,财务处 ...

  8. 【转】Linux下查看所有用户及用户组

    groups 查看当前登录用户的组内成员groups gliethttp 查看gliethttp用户所在的组,以及组内成员whoami 查看当前登录用户名/etc/group文件包含所有组/etc/s ...

  9. apt局域网源搭建

    1, 准备Packages.gz

  10. THOMAS MASON--英国顶级衬衫面料品牌

    欧尚时光 THOMAS MASON--英国顶级衬衫面料品牌 2014-01-26 欧尚时光      今天为大家介绍英国顶级衬衫面料厂商:THOMAS MASON(托马斯·梅森).THOMAS MAS ...