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

最近网站改版想让复制代码功能在多个浏览器上都可以实现，最近看网上不少说我们的代码复制功能不好用的，我们最近将会增加代码高亮等功能，希望大家多多支持我们

zeroclipboard是一个跨浏览器的库类它利用 Flash 进行复制，所以只要浏览器装有 Flash 就可以运行，而且比 IE 的 document.execCommand("Copy") 更加灵活。
需要使用到的资源下载地址：ZeroClipboard.1.7

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() );

zeroclipboard 粘贴板的应用示例，兼容 Chrome、IE等多浏览器相关推荐

brave浏览器_兼容Chrome 插件的Brave浏览器，带给你更快速的上网冲浪体验
目前浏览器中用的比较多的还是Chrome,尽管后来Firefox 和360用的人都是很多,在其浏览器中加入了像是扩展等功能,但不讳言的是Firefox 在速度上有点差强人意,相容性也不够全面,整体来说 ...
【兼容Chrome和Firefox】浏览器滚动条美化
问题浮现对于项目系统的美化处理,除了UI设计稿与组件自定义设计,对于浏览器滚动条的美化也是必要的,谁也不想自己的界面和布局都设计得很完美,结果出现了下图的滚动条吧那接下来我们实现一下类似cnblo ...
用js实现复制内容到操作系统粘贴板(兼容IE、谷歌、火狐等浏览器)
一.如果只考虑IE浏览器,可以直接用原声js实现 if(window.clipboardData){//清空操作系统粘贴板window.clipboardData.clearData();//将需要复 ...
ios下js复制到粘贴板_h5实现一键复制到粘贴板兼容ios
实现原理采用document.execCommand('copy') 来实现复制到粘贴板功能复制必须是选中input框的文字内容,然后执行document.execCommand('copy') ...
h5实现一键复制到粘贴板兼容iOS
copyText = (text) => {// 数字没有 .length 不能执行selectText 需要转化成字符串const textString = text.toString();l ...
html 一键复制 ios,h5实现一键复制到粘贴板-兼容ios
实现原理采用document.execCommand('copy')来实现复制到粘贴板功能复制必须是选中input框的文字内容,然后执行document.execCommand('copy')命令 ...
h5 实现一键复制到粘贴板兼容iOS
效果展示先贴上测试连接 http://cdn.foundao.com/zhaosheng/copytext 实现原理采用 document.execCommand('copy') 来实现复制到粘贴 ...
通过纯js代码实现将指定内容复制到粘贴板(兼容各主流浏览器)
通过纯js代码实现将指定内容复制到粘贴板(兼容各主流浏览器) 1.业务需求: vue项目需要通过点击button按钮将指定内容复制到粘贴板中,且不引入第三方组件. 2.解决方案: js写法如下(这里是 ...
ABAP实现粘贴板的操作，复制粘贴
ABAP可以实现复制粘贴的操作自己玩儿项目里暂时用不到在ABAP中的 CLASS :CL_GUI_FRONTEND_SERVICES中提供了两个方法来控制与剪贴板内容的导入导出, 分别是:CLI ...

zeroclipboard 粘贴板的应用示例，兼容 Chrome、IE等多浏览器

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

zeroclipboard 粘贴板的应用示例，兼容 Chrome、IE等多浏览器相关推荐

最新文章

热门文章

zeroclipboard 粘贴板的应用示例， 兼容 Chrome、IE等多浏览器

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

zeroclipboard 粘贴板的应用示例， 兼容 Chrome、IE等多浏览器相关推荐

最新文章

热门文章

zeroclipboard 粘贴板的应用示例，兼容 Chrome、IE等多浏览器

zeroclipboard 粘贴板的应用示例，兼容 Chrome、IE等多浏览器相关推荐