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 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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
PHP封装的HttpClient类用法实例
2015/06/17 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
js判断节假日实例代码
2017/12/27 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
python中sleep函数用法实例分析
2015/04/29 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
python安装twisted的问题解析
2018/08/21 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
UNIX文件系统分类
2014/11/11 面试题
学校出纳员岗位职责
2014/03/18 职场文书
学习普通话的体会
2014/11/07 职场文书
门卫岗位职责
2015/02/09 职场文书
求职简历自我评价2015
2015/03/10 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
Python多线程 Queue 模块常见用法
2021/07/04 Python
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL