浏览器复制插件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 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
JavaScript 变量基础知识
Nov 07 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
关于vue-router路径计算问题
May 10 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
一次编写,随处运行
2006/10/09 PHP
phpMyAdmin 安装及问题总结
2009/05/28 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
python 图片验证码代码分享
2012/07/04 Python
python实现打砖块游戏
2020/02/25 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
勾股定理课后反思
2014/04/26 职场文书
初一新生军训方案
2014/05/22 职场文书
水电维修专业推荐信
2014/09/06 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
外出听课学习心得体会
2016/01/15 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
Pygame Event事件模块的详细示例
2021/11/17 Python