浏览器复制插件zeroclipboard使用指南


Posted in Javascript onMarch 26, 2016

一个简单例子:

<html>
 <body>
  <button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
  <script src="~/Scripts/jquery-1.7.1.js"></script>
  <script src="~/Scripts/ZeroClipboard.js"></script>
 </body>
 <script>
 
 var client = new ZeroClipboard( $("#copy-button") );
  client.on('ready', function (event) {
 
      client.on('copy', function (event) {
        event.clipboardData.setData('text/plain', event.target.innerHTML);
        alert("复制成功");
      });
 
      client.on('aftercopy', function (event) {
        //复制之后的操作,如果不是自动在本页面粘贴,请把此事件备注掉
        console.log('Copied text to clipboard: ' + event.data['text/plain']);
      });
    });
 
    client.on('error', function (event) {
      //出错的时候该干嘛
      // console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
      ZeroClipboard.destroy();
    });
 </script>
</html>

2.2版本需要引用jquery,要习惯把js代码写到页面底部,经测试,发现此代码不支持IE10/11,以下提供兼容IE的function,替换js部分即可

<script>
    $(function() {
      var text="取文本";
      var msg="复制成功";
      clipboard("btn_copy",text,msg);
    });
 
    //参数说明
    //button:按钮id
    //text:要复制的文本
    //msg:复制成功提示文本
    function clipboard(button,text,msg) {
 
      if (window.clipboardData) {    //for ie
        var copyBtn = document.getElementById(button);
        copyBtn.onclick = function () {
          window.clipboardData.setData('text', text);
          alert(msg);
        }
      } else {
        var client = new ZeroClipboard($("#" + button));
        client.on('ready', function (event) {
 
          client.on('copy', function (event) {
            event.clipboardData.setData("text/plain", text);
            alert(msg);
          });
        });
 
        client.on('error', function (event) {
          ZeroClipboard.destroy();
        });
      }
      return false;
    }
  </script>

最后,需要注意的是不要在本地调度,你会发现不会生效,因为Flash的安全限制

zeroclipboard源码:https://github.com/zeroclipboard/zeroclipboard
zeroclipboard官网:zeroclipboard.org

Javascript 相关文章推荐
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
JS中的三个循环小结
Jun 20 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 #Javascript
javascript实现方法调用与方法触发小结
Mar 26 #Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 #Javascript
jQuery常用的一些技巧汇总
Mar 26 #Javascript
javascript拖拽应用实例(二)
Mar 25 #Javascript
几种经典排序算法的JS实现方法
Mar 25 #Javascript
javascript拖拽应用实例
Mar 25 #Javascript
You might like
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
js canvas实现五子棋小游戏
2021/01/22 Javascript
python基础教程之常用运算符
2014/08/29 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
基于Python绘制个人足迹地图
2020/06/01 Python
如何用Python绘制3D柱形图
2020/09/16 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
酒店服务与管理毕业生求职信
2013/11/02 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
活动宣传稿范文
2015/07/23 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python