zeroclipboard实现多浏览器复制到粘贴板功能
zeroclipboard实现多浏览器复制到粘贴板功能(单个复制按钮和多个复制按钮) 为了更好的用户体验,现在很多网站中文本框的内容只需要点击复制按钮这样就能把内容复制到粘贴板了;
出于兼容性的考虑,基本上都是通过zeroclipboard来实现.首先要下载zeroclipboard,解压后把ZeroClipboard.js和ZeroClipboard.swf、ZeroClipboard10.swf(“为了flash10”)放到项目中,可以通过ZeroClipboard.setMoviePath( '/ZeroClipboard.swf' )方法来加载swf;
下面是整理的代码(也是通过 网上查找整理的)
(单个复制按钮):
html:
<input type="text" value="text" id="copy_txt"/><a href="javascirpt:;" id="copy_btn">复制</a>
js:
<script language="JavaScript">
ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' ); //和html不在同一目录需设置setMoviePath
ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );
var clip = new ZeroClipboard.Client(); //创建新的Zero Clipboard对象
clip.setText( '' ); // will be set later on mouseDown //清空剪贴板
clip.setHandCursor( true ); //设置鼠标移到复制框时的形状
clip.setCSSEffects( true ); //启用css
clip.addEventListener( 'complete', function(client, text) { //复制完成后的监听事件
alert("aa")
clip.hide(); // 复制一次后,hide()使复制按钮失效,防止重复计算使用次数
} );
clip.addEventListener( 'mouseDown', function(client) {
clip.setText( document.getElementById('copy_txt').value );
} );
clip.glue( 'copy_btn' );
</script>
多个复制按钮:
<input type="text" value="text" id="copy_txt0"/><a href="javascirpt:;" id="copy_btn0" data='0' class="copyBtn">复制</a>
<input type="text" value="text" id="copy_txt1"/><a href="javascirpt:;" id="copy_btn1" data='1' class="copyBtn">复制</a>
<input type="text" value="text" id="copy_txt2"/><a href="javascirpt:;" id="copy_btn2" data='2' class="copyBtn">复制</a>
js:
<script language="JavaScript">
$(".copyBtn").each(function(i){
var id = $(this).attr('data');
var clip=null;
clip = new ZeroClipboard.Client();
ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' ); //和html不在同一目录需设置setMoviePath
ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );
clip.setHandCursor( true );
clip.setText( $("#copy_txt"+id).val() );
clip.addEventListener('complete', function (client, text) {
alert( "恭喜复制成功" );
});
clip.glue( 'copy_btn'+id);
});
</script>
zeroclipboard实现多浏览器复制到粘贴板功能的更多相关文章
- js 实现复制到粘贴板功能
前言:js 或者 jquery 都可以实现的复制到粘贴板功能,有时还想要有换行等格式(同 textarea) 网站地址:我的个人vue+element ui demo网站 github地址:yuleG ...
- Vue 实现复制到粘贴板功能
vue 实现复制到粘贴板功能需要依赖到 clipboard.js 1. 首先需要安装依赖 * 出现错误的话,可以试试 cnpm npm install --save vue-clipboard2 2 ...
- 转JS--通过按钮直接把input或者textarea里的值复制到粘贴板里
document.activeElement属性为HTML 5中新增的document对象的一个属性,该属性用于返回光标所在元素.当光标未落在页面中任何元素内时,属性值返回body元素. setSel ...
- clipboardjs复制到粘贴板
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...
- javascript网页复制功能-复制到粘贴板-兼容多数浏览器(不使用flash)
使用方法:clipBordCopy("hello Copy");//执行后复制hello Copy到粘贴板 通过 var result = clipBordCopy("h ...
- 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flas ...
- AX 利用windows粘贴板功能实现批量数据快速导出EXCEL
static void test(Args _args) { int lineNum; int titleLines; SysExcelApplication excel; SysExcelWorkb ...
- 使用clipboard插件实现div、textarea、input里面的内容复制到粘贴板
一.引用clipboard的js文件 二.编写代码.data-clipboard-action=“copy”,代表要执行的动作是复制.data-clipboard-target里面要是要选择复制的元素 ...
- C++ 复制到粘贴板
网上好多教程讲如何复制到剪切板,但是有可能复制的是乱码,为了方便,将CString类型的复制到剪切板 CString source;if (OpenClipboard()){//防止非ASCII语言复 ...
随机推荐
- 在Windows Azure上创建ASP.NET MVC网站
本篇体验在Windows Azure上创建ASP.NET MVC网站. →登录到Windows Azure管理门户 →点击左下方的"新建" →点击"自定义创建" ...
- iOS 7.1 系统可以设置 button shapes,此功能可让按钮多一条下滑线
IniOS 7, Apple completely revamped the user interface to give it a fresh and modern look. One of the ...
- 盾牌第一至七季/全集The Shield迅雷下载
英文译名The Shield,第1-7季(2002-2008)FX.本季看点:<盾牌>一部极具争议性的连续剧,打破了传统警匪片套路,刻画了性格复杂的警察,他们在与各种罪案做斗争的同时,也面 ...
- Java并发编程的艺术(十一)——线程池(2)
Executor两级调度模型 在HotSpot虚拟机中,Java中的线程将会被一一映射为操作系统的线程. 在Java虚拟机层面,用户将多个任务提交给Executor框架,Executor负责分配线程执 ...
- 详细解读LruCache类
LruCache是android提供的一个缓存工具类,其算法是最近最少使用算法.它把最近使用的对象用“强引用”存储在LinkedHashMap中,并且把最近最少使用的对象在缓存值达到预设定值之前就从内 ...
- 机器学习的MLE和MAP:最大似然估计和最大后验估计
https://zhuanlan.zhihu.com/p/32480810 TLDR (or the take away) 频率学派 - Frequentist - Maximum Likelihoo ...
- RF的特征子集选取策略(spark ml)
支持连续变量和类别变量,类别变量就是某个属性有三个值,a,b,c,需要用Feature Transformers中的vectorindexer处理 上来是一堆参数 setMaxDepth:最大树深度 ...
- [转]PHP 真正多线程的使用
From : http://blog.s135.com/pthreads/ PHP 5.3 以上版本,使用pthreads PHP扩展,可以使PHP真正地支持多线程.多线程在处理重复性的循环任务,能够 ...
- gNewSense 3.0 Beta 2 发布
gNewSense 3.0 Beta 2 发布,下载地址:gnewsense-livecd-parkes-i386-3.0beta2.iso (1,078MB, MD5, torrent). 发行通知 ...
- 使用jupyter搭建golang的交互式界面:类似于ipython;jupyter还可以使用spark或者结合机器学习
Jupyter Notebook The Jupyter notebook is a web-based notebook environment for interactive computing. ...