Zclip:复制页面内容到剪贴板兼容各浏览器
WEB开发中,要让用户复制页面中的一段代码、URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方。
效果如下所示:
aaarticlea/png;base64,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" alt="" />
下面将结合实例讲解如何使用一款基于jQuery的插件——Zclip来实现复制内容到剪贴板的功能,只说如何使用,不讲原理。其实IE上有个方法可以实现点击复制,但是由于只是IE独有,所以我们不提倡。而Zclip是利用一个隐藏的flash文件来完成复制的功能,关键是它兼容当前各主流浏览器。
我在在本地测试不成功,所以最好部署到Tomcat上面进行测试。
jsp文件:
首先需要在页面中载入jquery库和zclip插件
<script type="text/javascript" src="js/jquery-1.7.2.min.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();
这样就完成了复制内容到剪贴板的功能。
完整代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>演示:复制页面内容到剪贴板兼容各浏览器</title>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<style type="text/css">
.demo{width:760px; margin:40px auto 0 auto; min-height:150px;}
textarea{width:100%; height:80px; border:1px solid #ddd; color:#666}
#para{line-height:24px; background:#f7f7f7; padding:10px}
.copy{line-height:32px}
#msg{margin-left:10px; color:green; border:1px solid #3c3; background:url(checkmark.png) no-repeat 2px 3px; padding:3px 6px 3px 20px}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>
<script type="text/javascript">
$(function(){
$('#copy_input').zclip({
path: 'js/ZeroClipboard.swf',
copy: function(){
return $('#mytext').val();
},
afterCopy: function(){
$("<span id='msg'/>").insertAfter($('#copy_input')).text('复制成功').fadeOut(2000);
}
});
$("#copy_p").zclip({
path: 'js/ZeroClipboard.swf',
copy: $('#para').text()+"Helloweba.com",
afterCopy: function(){
$("#para").css("background-color",'#cff');
$("<span id='msg'/>").insertAfter($('#copy_p')).text('复制成功').fadeOut(2000);
}
});
$('#mytext').focus(function(){
var txt = $(this).val();
if(txt=='请输入内容'){
$(this).val('');
}
});
});
</script>
</head> <body>
<div id="main">
<div class="demo">
<textarea id="mytext">请输入内容</textarea><br/>
<a href="#" id="copy_input" class="copy">复制内容</a>
</div>
</div>
</body>
</html>
参数说明
path:swf调用路径,必须,如js/ZeroClipboard.swf,ZeroClipboard.swf文件已存在下载包中。
copy:复制的内容,必须,任意字符串,也可以是回调函数返回的内容
beforeCopy:复制内容前回调函数,可选
afterCopy:复制内容后回调函数,可选
说明:这种方式我在复杂的样式环境下测试,flash定位不到点击按钮,在普通的样式里面没有问题,解决方案是需要修改源代码,可以查看我另外一篇博文:
jQuery ZeroClipboard中Flash定位不准确的解决方案
您也可以到zclip官网了解更多信息:http://steamdev.com/zclip/
完整DEMO下载:点击下载
原文地址参考:http://www.helloweba.com/view-blog-222.html
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复制文本内容到剪贴板
记录一下使用clipboardData复制不成功. 1.定义一个按钮执行复制 <div> <button type="button" id="copyR ...
- 使用clipboard.js复制页面内容到剪切板
最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼 ...
- JS复制制定内容到剪贴板怎么做?
可以使用input也可以使用textare文本域来做(而且这个input/textarea不能够被隐藏): <a href="javascript:;" onclick=&q ...
- 禁止页面后退JS(兼容各浏览器)
<script src="${ctxPath}/media/lib/jquery.history.js"></script> <script> ...
- JS实现复制到剪贴板(兼容FF/Chrome/Safari所有浏览器)
现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...
随机推荐
- 用memcached实现的php锁机制
<?php /** * 使用Memcache实现给进程加锁的类 * * Copyright (C) 2013 JeffJing * * 一些时候需要让系统的某些操作串行化,这个时候就要对这些操作 ...
- ref:【干货分享】PHP漏洞挖掘——进阶篇
ref:http://blog.nsfocus.net/php-vulnerability-mining/ [干货分享]PHP漏洞挖掘——进阶篇 王陶然 从常见的PHP风险点告诉你如何进行PH ...
- 如何监控GPU使用情况并杀死指定其中进程
仰望高端玩家的小清新 http://www.cnblogs.com/luruiyuan/ 有时候我们常常会有一个需求是监控GPU指定情况,并且需要根据需要杀死GPU进程 这里介绍几个与之相关的指令: ...
- 洛谷——P1330 封锁阳光大学
P1330 封锁阳光大学 题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构 ...
- File Associations
- Centos 7 mysql 安装使用记
某次把美团云1G 1核 centos 7 装到死机,明白了源码编译安装mysql是个大坑,遂绕路到其他大道. 安装命令 wget http://dev.mysql.com/get/mysql-comm ...
- 创建模态提醒窗口(UIAlertView)
UIAlertView类创建一个简单的模态提醒窗口,可能包含消息.按钮以及文本框.模态UI元素要求用户必须与之交互(通常是按下按钮)后才能做其它事情.它们通常位于其他窗口前面,在可见时禁止用户与其他任 ...
- 2017-2018-1 JAVA实验站 冲刺 day07
2017-2018-1 JAVA实验站 冲刺 day07 各个成员今日完成的任务 小组成员 今日工作 完成进度 张韵琪 写博客.进行工作总结 100% 齐力锋 部分按钮图片.对按钮图片进行ps 100 ...
- AOP 面向切面 记录请求接口的日志
AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一个热点, ...
- WNDR4300v2 固件编译
WNDR4300v2 固件编译 1.从官网下载源码 从官网找到 https://kb.netgear.com/2649/NETGEAR-Open-Source-Code-for-Programme ...