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


Posted in Javascript onJune 14, 2014

zeroclipboard是一个跨浏览器的库类 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活。

zeroclipboard下载地址:https://3water.com/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() );

Javascript 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
js+css实现打字效果
Jun 24 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 #Javascript
jquery实现倒计时代码分享
Jun 13 #Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 #Javascript
改变状态栏文字的js代码
Jun 13 #Javascript
js数组中如何随机取出一个值
Jun 13 #Javascript
可编辑下拉框的2种实现方式
Jun 13 #Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 #Javascript
You might like
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
php中的时间处理
2006/10/09 PHP
php二分查找二种实现示例
2014/03/12 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python生成不重复随机值的方法
2015/05/11 Python
详解Django中的过滤器
2015/07/16 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
Python实现自动访问网页的例子
2020/02/21 Python
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
大学新生军训个人的自我评价
2013/10/03 职场文书
厨房工作人员岗位职责
2013/11/15 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
春季运动会加油词
2015/07/18 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
python实现简单区块链结构
2021/04/25 Python