1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <title>ZeroClipboard Test</title>
  5.  <meta charset="utf-8">
  6.  <script type="text/javascript" src="clipboard.min.js"></script>
  7.  <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
  8.  </head>
  9.  <body>
  10.  
  11.  <input id="t" type="text"/>数据输出测试<br>
  12.  <textarea id="t2"></textarea><br>
  13.  <!--测试1-->
  14.  <!--button按钮测试，需要复制的值放在属性  data-clipboard-text中<br>-->
  15.  <button class="btn" data-clipboard-text="测试1">点击测试1</button><br><br>
  16.  
  17.  <!--测试2-->
  18.  <!--a按钮测试，需要复制的值放在属性 data-clipboard-text中<br>-->
  19.  <a class="a" data-clipboard-text="测试2">点击测试2</a><br><br>
  20.  
  21.  <!--测试3-->
  22.  <!--测试，通过按钮的data-clipboard-target属性获取指定标签中的值-->
  23.  <div>测试3</div>
  24.   <button class="btn2" data-clipboard-action="copy" data-clipboard-target="div">点击测试3</button><br><br>
  25.  
  26.   <!--测试4-->
  27.   <!--测试，通过按钮的data-clipboard-target属性获取指id的标签中的值中 -->
  28.   <button class="btn3" data-clipboard-action="copy" data-clipboard-target="#t2">点击测试4</button>
  29.  
  30.  </body>
  31.  </html>
  32.  <script type="text/javascript">
  33.  <!--测试1-->
  34.  $(document).ready(function(){
  35.     var clipboard = new Clipboard('.btn');
  36.     clipboard.on('success', function(e) {
  37.         console.log(e);
  38.          alert("测试1复制成功！")
  39.          });
  40.     clipboard.on('error', function(e) {
  41.                 console.log(e);
  42.                 alert("测试1复制失败！请手动复制")
  43.           });
  44.  })
  45.  <!--测试2-->
  46.  $(document).ready(function(){
  47.     var clipboard1 = new Clipboard('.a');
  48.     clipboard1.on('success', function(e) {
  49.         console.log(e);
  50.          alert("测试2复制成功！")
  51.          });
  52.     clipboard1.on('error', function(e) {
  53.                 console.log(e);
  54.                 alert("测试2复制失败！请手动复制")
  55.           });
  56.  })
  57.  <!--测试3-->
  58.  $(document).ready(function(){
  59.     var clipboard2 = new Clipboard('.btn2');
  60.     clipboard2.on('success', function(e) {
  61.         console.log(e);
  62.          alert("测试3复制成功！")
  63.          });
  64.     clipboard2.on('error', function(e) {
  65.                 console.log(e);
  66.                 alert("测试3复制失败！请手动复制")
  67.           });
  68.  })
  69.  <!--测试4-->
  70.  $(document).ready(function(){
  71.     var clipboard3 = new Clipboard('.btn3');
  72.     clipboard3.on('success', function(e) {
  73.         console.log(e);
  74.          alert("测试4复制成功！")
  75.          });
  76.     clipboard3.on('error', function(e) {
  77.                 console.log(e);
  78.                 alert("测试4复制失败！请手动复制")
  79.           });
  80.  })
  81.  </script>

案例二

  1.  <script src="clipboard.min.js"></script>
  2.   <textarea id="bar" cols="62" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra l¨¢ , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. M¨¦ faiz elementum girarzis, nisi eros vermeio, in elementis m¨¦ pra quem ¨¦ amistosis quis leo. Manduma pindureta quium dia nois paga.</textarea>
  3.  
  4.  <!-- Trigger -->
  5.  <button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
  6.      Cut to clipboard
  7.  </button>
  8.  <script>
  9.  var clipboard = new Clipboard('.btn');
  10.  clipboard.on('success', function(e) {
  11.      console.info('Action:', e.action);
  12.      console.info('Text:', e.text);
  13.      console.info('Trigger:', e.trigger);
  14.  alert("¸´ÖƳɹ¦");
  15.      e.clearSelection();
  16.  });
  17.  
  18.  clipboard.on('error', function(e) {
  19.      console.error('Action:', e.action);
  20.      console.error('Trigger:', e.trigger);
  21.  });
  22.  </script>

复制粘贴之插件（clipboard.min.js）不需要安装flash的更多相关文章

  1. jq复制到剪切板插件clipboard.min.js（兼容IE9）

    /*! * clipboard.js v1.5.5 * https://zenorocha.github.io/clipboard.js * * Licensed MIT 漏 Zeno Rocha * ...

  2. js实现复制 、剪切功能-clipboard.min.js 示例

    html: <div id="txt">我是要复制的内容</button> <button id="copyBtn">点击复 ...

  3. 复制粘贴之插件（jquery.zclip.min.js）需要安装flash

    .line{margin-bottom:20px;} /* 复制提示 */ .copy-tips{position:fixed;z-index:999;bottom:50%;left:50%;marg ...

  4. clipboard.min.js 复制表格内容

    <script type="text/javascript" src="js/clipboard.min.js"></script> & ...

  5. js判断是否安装flash player及当前版本 和 检查flash版本是否需要升级

    一.js检查flash版本升级 for (var i = 0, len = navigator.plugins.length; i < len; i++) { var plugin = navi ...

  6. 前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述

    前言 作为一名资深搬砖工,你要问我用得最熟练的技能是什么,那我敢肯定且自豪的告诉你:是 Ctrl+C !是 Ctrl+V! 不信?你来看看我键盘上的 Ctrl.C 和 V 键,那油光发亮的包浆程度,不 ...

  7. 轮播插件unslider.min.js使用demo

    有两种应用方式: 1.轮播图片作为<img>标签使用 HTML代码: <html> <head> <meta charset="utf-8" ...

  8. js-利用插件qrcode.min.js，前端实时生成二维码

    qrcode.min.js <script type="text/javascript" src="js/jquery.min.js"></s ...

  9. JQuery 复制粘贴上传图片插件（textarea 和 tinyMCE）

    开源地址:https://github.com/yuezhongxin/paste-upload-image.js 支持 Ctrl+C/Ctrl+V 上传,支持拖拽上传,也支持 QQ/微信截图上传. ...

随机推荐

  1. 济南清北学堂游记 Day 7.

    完结撒花? 最后的模拟赛与讲题.大家似乎仍然乐在其中,虽然看评测结果,仍然是满地红. 其实到了最后已经是没有多少可写的了..... 一个精彩的地方是晚上填表的时候,群里炸锅了已经.到处都在刷CCL老师 ...

  2. BZOJ 2467: [中山市选2010]生成树 [组合计数]

    2467: [中山市选2010]生成树 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 638  Solved: 453[Submit][Status][ ...

  3. qt的信号与槽函数

    关联: bool connect ( const?QObject?*?sender, const?char?*?signal, const QObject * receiver, const char ...

  4. [Python Study Notes]cpu信息

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  5. Dynamics 365 Online-多选域

    参与过Dynamics CRM相关工作的朋友们都知道,Dynamics 365之前并没有多选域字段,想要实现多选域,需要自己添加WebResource定制,而这也带来了一系列需要考虑的情况,比如额外的 ...

  6. C语言_了解一下C语言中的四种存储类别

    C语言是一门通用计算机编程语言,应用广泛.C语言的设计目标是提供一种能以简易的方式编译.处理低级存储器.产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言. C语言中的四种存储类别:auto ...

  7. java字符串以及字符类型基础

    介绍一下java字符集和字符的编码方式, 首先要区分一下字符集和字符编码.所谓的字符集 类似于unicode,GB2312,GBK,ASCII等等.因为一开始只有26个英文字母需要 编一下号.所有用下 ...

  8. 第十九章 Django的ORM映射机制

    第十九章 Django的ORM映射机制 第一课 Django获取多个数据以及文件上传 1.获取多选的结果(checkbox,select/option)时: req.POST.getlist('fav ...

  9. HDU - 1907 John 反Nimm博弈

    思路: 注意与Nimm博弈的区别,谁拿完谁输! 先手必胜的条件: 1.  每一个小游戏都只剩一个石子了,且SG = 0. 2. 至少有一堆石子数大于1,且SG不等于0 证明:1. 你和对手都只有一种选 ...

  10. scrapy学习总结

    1.为了配合XPath,Scrapy除了提供了 Selector 之外,还提供了方法来避免每次从response中提取数据时生成selector的麻烦 Selector有四个基本的方法(点击相应的方法 ...