浏览器复制插件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 相关文章推荐
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
ReactRouter的实现方法
Jan 25 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
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制作中间带自己定义图片二维码的方法
2014/01/27 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
js 调整select 位置的函数
2008/02/21 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
python实现斐波那契递归函数的方法
2014/09/08 Python
linux 下实现python多版本安装实践
2014/11/18 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
详解Python中的type()方法的使用
2015/05/21 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
python 基础教程之Map使用方法
2017/01/17 Python
python实现发送邮件及附件功能
2021/03/02 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
python实现二维插值的三维显示
2018/12/17 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
大学生物业管理求职信
2013/10/24 职场文书
超市业务员岗位职责
2013/12/05 职场文书
小学副班长竞选稿
2015/11/21 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫