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

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

1. 准备工作

准备好jquery,然后去http://www.steamdev.com/zclip/这里下载jquery.zclip.js和ZeroClipboard.swf ,不过那里的ZeroClipboard.swf下载地址失效了,你可以去这里http://pan.baidu.com/share/link?shareid=1286340661&uk=2133883598&fid=2382679931下载,我测试过可以使用。

在html里加上

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

2. 编写代码

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

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

然后加入脚本,非常的简单。

<script>
$('#copyBtn').zclip({
path: "ZeroClipboard.swf",
copy: function(){
return $('#link').val();
      }
});
</script>

这里的path是你flash的路径,copy是复制成功之后的回调函数。返回的是文本框里的value值。

另外我们还要对jquery.zclip.js进行设置,用编辑器打开它,就在前面,你会看到如下代码:

 var settings = $.extend({

                path: 'ZeroClipboard.swf',
copy: null,
beforeCopy: null,
afterCopy: null,
clickAfter: true,
setHandCursor: true,
setCSSEffects: true }, params);

同样修改path为你的flash--ZeroClipboard.swf的路径,其他的设置我们先不管他。

好了,立马来测试吧,不过这里要注意的是,本地测试是不成功的,你要用tomcat或apache在本机搭一个服务器,然后把文件放到服务器目录下测试。你会看到移到复制链接上的时候出现了小手,又见是flash的菜单,如图所示:

然后点击它,出现成功提示框。你可以试着在其他地方粘贴,看看有没有复制成功。

当然你也可以修改复制成功之后的提示框,或者添加更多功能。

在中找到如下代码。

                    clip.addEventListener('complete', function(client, text) {

                        if ($.isFunction(settings.afterCopy)) {

                            o.trigger('zClip_afterCopy');

                        } else {
if (text.length > 500) {
text = text.substr(0, 500) + "...\n\n(" + (text.length - 500) + " characters not shown)";
} o.removeClass('hover');
alert("Copied text to clipboard:\n\n " + text);
} if (settings.clickAfter) {
o.trigger('click');
} });

修改alert那个地方的代码就可以了,也许还有其他地方也可以修改,我没有细看。

3. 其他

我们用chrome打开我们的demo,打开控制台可以看到

没错,这正是插件给我们的页面插入了flash,可以看到它正好盖住了我们的”复制链接“按钮。

好了,使用插件zClip来实现复制到剪贴板的功能就介绍到这里了。更多的细节请访问:http://www.steamdev.com/zclip/

详细介绍了插件的用法,以及相关参数的设置,包括复制成功之后的函数,怎么给”复制链接“按钮添加样式等等。

参考资料:http://www.steamdev.com/zclip/

js插件zClip实现复制到剪贴板功能的更多相关文章

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

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

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

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

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

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

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

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

  5. JS pc端和移动端共同实现复制到剪贴板功能实现

    JS pc端和移动端实现复制到剪贴板功能实现 在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了, ...

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

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

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

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

  8. amazeui中的js插件有哪些(详解功能)

    amazeui中的js插件有哪些(详解功能) 一.总结 一句话总结: 二.amazeui中的js插件有哪些 1.UI 增强 警告框Alert 按钮交互Button 折叠面板Collapse 下拉组件D ...

  9. 兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

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

随机推荐

  1. form 转json最佳示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Markdown和reStructuredText语法比较

    reStructuredText在线编辑器 http://rst.ninjs.org/ ReST是Docutils的标记语法,Docutils是Python世界的文档工具集.也因为这样ReST在Pyt ...

  3. Linux下apache的停止、开启、重启

    有两种途径 一. service httpd stop(停止) service httpd start(开始) service httpd restart(重启) 这种方法,是系统自带的 二. 或者到 ...

  4. 【中国剩余定理】POJ 1006 & HDU 1370 Biorhythms

    题目链接: http://poj.org/problem?id=1006 http://acm.hdu.edu.cn/showproblem.php?pid=1370 题目大意: (X+d)%23=a ...

  5. JS能力测评试题

    找出元素 item 在给定数组 arr 中的位置 function indexOf(arr, item) { return arr.indexOf(item); } function indexOf( ...

  6. OpenSSL与公钥私钥证书签名的千丝万缕

    导语 人对任何事物的认识都是阶段性的,从无知到知晓,从懵懂到半知半解,从误解到将信将疑,从晕头转向到下定决心吃透. 介绍 OpenSSL是一个强大的命令行工具,它可以用来处理许多种跟PKI(Publi ...

  7. Clipboard.js : 移动端浏览器实现网页内容复制

    .bl { padding: 5px 10px; border-left: 3px solid #009a61; background: #f6f6f6; color: #555; font-size ...

  8. linux用户权限相关命令

    1.创建组 groupadd test     修改组 groupmod -n test2 test 将名字改为test2     删除组 groupdel test     查看组 groups r ...

  9. 4 Java学习之 反射Reflection

    1. 反射概念  反射机制就是:动态地获取类的一切信息,并利用这些信息做一些你想做的事情. java反射机制能够知道类名而不实例化对象的状态下,获得对象的属性或调用方法. JAVA反射机制是在运行状态 ...

  10. iOS8新特性之基于地理位置的消息通知UILocalNotification

              苹果在WWDC2014上正式公布了全新的iOS8操作系统. 界面上iOS8与iOS7相比变化不大,只是在功能方面进行了完好.                             ...