js插件zClip实现复制到剪贴板功能
相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要。
网上一搜一大堆,单纯使用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实现复制到剪贴板功能的更多相关文章
- 【转】js插件zClip实现复制到剪贴板功能
相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...
- 【转】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 【原】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- JS pc端和移动端共同实现复制到剪贴板功能实现
JS pc端和移动端实现复制到剪贴板功能实现 在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了, ...
- JQuery实现复制到剪贴板功能
在网页中实现复制到剪贴板功能,有两种方法, 第1种方法:使用JavaScript自带的方法,但是这种方法只能在IE下使用. document.execCommand("Copy") ...
- Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能
开发中经常会用到复制的功能,在 IE 下实现比较简单,但要想做到跨浏览器比较困难了. 本文将介绍一个跨浏览器的库类 Zero Clipboard ,它利用 Flash 进行复制,所以只要浏览器装有 F ...
- amazeui中的js插件有哪些(详解功能)
amazeui中的js插件有哪些(详解功能) 一.总结 一句话总结: 二.amazeui中的js插件有哪些 1.UI 增强 警告框Alert 按钮交互Button 折叠面板Collapse 下拉组件D ...
- 兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能
相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...
随机推荐
- form 转json最佳示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Markdown和reStructuredText语法比较
reStructuredText在线编辑器 http://rst.ninjs.org/ ReST是Docutils的标记语法,Docutils是Python世界的文档工具集.也因为这样ReST在Pyt ...
- Linux下apache的停止、开启、重启
有两种途径 一. service httpd stop(停止) service httpd start(开始) service httpd restart(重启) 这种方法,是系统自带的 二. 或者到 ...
- 【中国剩余定理】POJ 1006 & HDU 1370 Biorhythms
题目链接: http://poj.org/problem?id=1006 http://acm.hdu.edu.cn/showproblem.php?pid=1370 题目大意: (X+d)%23=a ...
- JS能力测评试题
找出元素 item 在给定数组 arr 中的位置 function indexOf(arr, item) { return arr.indexOf(item); } function indexOf( ...
- OpenSSL与公钥私钥证书签名的千丝万缕
导语 人对任何事物的认识都是阶段性的,从无知到知晓,从懵懂到半知半解,从误解到将信将疑,从晕头转向到下定决心吃透. 介绍 OpenSSL是一个强大的命令行工具,它可以用来处理许多种跟PKI(Publi ...
- Clipboard.js : 移动端浏览器实现网页内容复制
.bl { padding: 5px 10px; border-left: 3px solid #009a61; background: #f6f6f6; color: #555; font-size ...
- linux用户权限相关命令
1.创建组 groupadd test 修改组 groupmod -n test2 test 将名字改为test2 删除组 groupdel test 查看组 groups r ...
- 4 Java学习之 反射Reflection
1. 反射概念 反射机制就是:动态地获取类的一切信息,并利用这些信息做一些你想做的事情. java反射机制能够知道类名而不实例化对象的状态下,获得对象的属性或调用方法. JAVA反射机制是在运行状态 ...
- iOS8新特性之基于地理位置的消息通知UILocalNotification
苹果在WWDC2014上正式公布了全新的iOS8操作系统. 界面上iOS8与iOS7相比变化不大,只是在功能方面进行了完好. ...