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实现多浏览器复制到粘贴板功能的更多相关文章

  1. js 实现复制到粘贴板功能

    前言:js 或者 jquery 都可以实现的复制到粘贴板功能,有时还想要有换行等格式(同 textarea) 网站地址:我的个人vue+element ui demo网站 github地址:yuleG ...

  2. Vue 实现复制到粘贴板功能

    vue 实现复制到粘贴板功能需要依赖到 clipboard.js 1. 首先需要安装依赖  * 出现错误的话,可以试试 cnpm npm install --save vue-clipboard2 2 ...

  3. 转JS--通过按钮直接把input或者textarea里的值复制到粘贴板里

    document.activeElement属性为HTML 5中新增的document对象的一个属性,该属性用于返回光标所在元素.当光标未落在页面中任何元素内时,属性值返回body元素. setSel ...

  4. clipboardjs复制到粘贴板

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  5. javascript网页复制功能-复制到粘贴板-兼容多数浏览器(不使用flash)

    使用方法:clipBordCopy("hello Copy");//执行后复制hello Copy到粘贴板 通过 var result = clipBordCopy("h ...

  6. 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

    Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flas ...

  7. AX 利用windows粘贴板功能实现批量数据快速导出EXCEL

    static void test(Args _args) { int lineNum; int titleLines; SysExcelApplication excel; SysExcelWorkb ...

  8. 使用clipboard插件实现div、textarea、input里面的内容复制到粘贴板

    一.引用clipboard的js文件 二.编写代码.data-clipboard-action=“copy”,代表要执行的动作是复制.data-clipboard-target里面要是要选择复制的元素 ...

  9. C++ 复制到粘贴板

    网上好多教程讲如何复制到剪切板,但是有可能复制的是乱码,为了方便,将CString类型的复制到剪切板 CString source;if (OpenClipboard()){//防止非ASCII语言复 ...

随机推荐

  1. delphi实现数字签名

    上周,另一部门需要支援解决数字签名问题.但因为之前也没做过,现学现卖.此方面可参考的中文资料较少,特作分享,方便查阅. 上周,另一部门需要支援解决数字签名问题.但因为之前也没做过,现学现卖.此方面可参 ...

  2. YII框架分析笔记2:组件和事件行为管理

    Yii是一个基于组件.用于开发大型 Web 应用的高性能 PHP 框架.CComponent几乎是所有类的基类,它控制着组件与事件的管理,其方法与属性如下,私有变量$_e数据存放事件(evnet,有些 ...

  3. 手机端可以和PC端同时在线-java QRCode 实现网站扫码登录(即支持同帐号多设备同时登录)

    微信扫码测试地址:: http://sms.reyo.cn 用户名:aa 密码:123456 扫码登录实现方式很多,比如ajax轮询,http长连接(comet...),websocket,event ...

  4. CountDownLatch使用场景及分析

    JDk1.5提供了一个非常有用的包,Concurrent包,这个包主要用来操作一些并发操作,提供一些并发类,可以方便在项目当中傻瓜式应用. JDK1.5以前,使用并发操作,都是通过Thread,Run ...

  5. securecrt 多窗口执行命令

    首先在SecureCRT里同时打开多个服务器session(必须是有相同目录结构) 选择菜单栏View –>Chat Windows 对号,此时所有服务器连接下方应该有个空白的部分 在空白的部分 ...

  6. 【转】你真的懂select Socket模型吗?

    转自:http://www.cppblog.com/xvsdf100/archive/2013/12/10/204689.html     只要接触过c/c++网路编程人都可能会知道select io ...

  7. 样条之埃尔米特(Hermite)

    埃尔米特(Charles Hermite,1822—1901) 法国数学家.巴黎综合工科学校毕业.曾任法兰西学院.巴黎高等师范学校.巴黎大学教授.法兰西科学院院士.在函数论.高等代数.微分方程等方面都 ...

  8. Qt信号槽的一些事 Qt::带返回值的信号发射方式

    一般来说,我们发出信号使用emit这个关键字来操作,但是会发现,emit并不算一个调用,所以它没有返回值.那么如果我们发出这个信号想获取一个返回值怎么办呢? 两个办法:1.通过出参形式返回,引用或者指 ...

  9. 使用mmap可以方便地添加共享内存

    使用mmap添加的共享内存. 局限: 只能在有亲属关系的进程之间使用. #include <stdio.h> #include <stdlib.h> #include < ...

  10. 第十一章 dubbo通信框架-netty4

    netty4是2.5.6引入的,2.5.6之前的netty用的是netty3.在dubbo源码中相较于netty3,添加netty4主要仅仅改了两个类:NettyServer,NettyClient. ...