zeroclipboard 单个复制按钮和多个复制按钮的实现方法

 更新时间:2014年06月14日 02:38:56   投稿:mdxy-dxy  
最近网站改版想让复制代码功能在多个浏览器上都可以实现,最近看网上不少说我们的代码复制功能不好用的,我们最近将会增加代码高亮等功能,希望大家多多支持我们
zeroclipboard是一个跨浏览器的库类 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活。

zeroclipboard下载地址:https://www.jb51.net/jiaoben/24961.html

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>
<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>
<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>

注意: clip.setText( $("#copy_txt"+id).val() );如果是获取div中的内容, 一般用clip.setText( $("#copy_txt"+id).text() );或clip.setText( $("#copy_txt"+id).html() );

相关文章

  • JS监听一个变量改变的两种方法

    JS监听一个变量改变的两种方法

    在业务中,由于项目采用微前端架构,需要通过A应用的某个值的变化对B应用中的DOM进行改变(如弹出一个Modal),第一个想到的可能是发布订阅模式,其实不如将问题缩小化,采用原生的能力去解决,本文介绍了两种方法来使用JS监听一个变量改变,需要的朋友可以参考下
    2023-11-11
  • Ionic2开发环境搭建教程

    Ionic2开发环境搭建教程

    这篇文章主要为大家详细介绍了Ionic2开发环境的搭建教程,文中步骤介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 微信小程序自定义模态对话框实例详解

    微信小程序自定义模态对话框实例详解

    这篇文章主要为大家详细介绍了微信小程序自定义模态对话框实例的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JavaScript–Apple设备检测示例代码

    JavaScript–Apple设备检测示例代码

    JavaScript–Apple设备检测示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • Nuxt默认模板、默认布局和自定义错误页面的实现

    Nuxt默认模板、默认布局和自定义错误页面的实现

    这篇文章主要介绍了Nuxt默认模板、默认布局和自定义错误页面的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • JavaScript中Iterator迭代器接口和循环

    JavaScript中Iterator迭代器接口和循环

    这篇文章主要介绍了JavaScript中Iterator迭代器接口和循环,迭代器是数据结构遍历的一种机制迭代器主要是提供for...of使用,更多相关内推需要的小伙伴可以参考下面文章内容
    2022-06-06
  • 精通Javascript系列之数值计算

    精通Javascript系列之数值计算

    在JS中如果希望某个变量包含一个数值,那么无需限定其必须是整数或者是浮点数,下面来个例子
    2011-06-06
  • webpack模块化的原理解析

    webpack模块化的原理解析

    webpack 中实现模块化的核心就是 __webpack_require__ 函数,无论是commonjs模块化还是es 模块都是通过该函数来导入的,这篇文章主要介绍了webpack模块化的原理,需要的朋友可以参考下
    2023-02-02
  • BootStrap table使用方法分析

    BootStrap table使用方法分析

    这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法,具有一定的实用性和参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • js实现关闭网页出现是否离开提示

    js实现关闭网页出现是否离开提示

    本篇文章主要给大家带来一个JS实用功能,监听浏览器在关闭的时候提示出是否要离开的小功能,需要的朋友学习下吧。
    2017-12-12

最新评论