<!DOCTYPE html>
 <html>
 <head>
 <title>ZeroClipboard Test</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="clipboard.min.js"></script>
 <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
 </head>
 <body>

 <input id="t" type="text"/>数据输出测试<br>
 <textarea id="t2"></textarea><br>
 <!--测试1-->
 <!--button按钮测试，需要复制的值放在属性  data-clipboard-text中<br>-->
 <button class="btn" data-clipboard-text="测试1">点击测试1</button><br><br>

 <!--测试2-->
 <!--a按钮测试，需要复制的值放在属性 data-clipboard-text中<br>-->
 <a class="a" data-clipboard-text="测试2">点击测试2</a><br><br>

 <!--测试3-->
 <!--测试，通过按钮的data-clipboard-target属性获取指定标签中的值-->
 <div>测试3</div>
  <button class="btn2" data-clipboard-action="copy" data-clipboard-target="div">点击测试3</button><br><br>

  <!--测试4-->
  <!--测试，通过按钮的data-clipboard-target属性获取指id的标签中的值中 -->
  <button class="btn3" data-clipboard-action="copy" data-clipboard-target="#t2">点击测试4</button>

 </body>
 </html>
 <script type="text/javascript">
 <!--测试1-->
 $(document).ready(function(){
    var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
         alert("测试1复制成功！")
         });
    clipboard.on('error', function(e) {
                console.log(e);
                alert("测试1复制失败！请手动复制")
          });
 })
 <!--测试2-->
 $(document).ready(function(){
    var clipboard1 = new Clipboard('.a');
    clipboard1.on('success', function(e) {
        console.log(e);
         alert("测试2复制成功！")
         });
    clipboard1.on('error', function(e) {
                console.log(e);
                alert("测试2复制失败！请手动复制")
          });
 })
 <!--测试3-->
 $(document).ready(function(){
    var clipboard2 = new Clipboard('.btn2');
    clipboard2.on('success', function(e) {
        console.log(e);
         alert("测试3复制成功！")
         });
    clipboard2.on('error', function(e) {
                console.log(e);
                alert("测试3复制失败！请手动复制")
          });
 })
 <!--测试4-->
 $(document).ready(function(){
    var clipboard3 = new Clipboard('.btn3');
    clipboard3.on('success', function(e) {
        console.log(e);
         alert("测试4复制成功！")
         });
    clipboard3.on('error', function(e) {
                console.log(e);
                alert("测试4复制失败！请手动复制")
          });
 })
 </script>

案例二

 <script src="clipboard.min.js"></script>
  <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>

 <!-- Trigger -->
 <button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
     Cut to clipboard
 </button>
 <script>
 var clipboard = new Clipboard('.btn');
 clipboard.on('success', function(e) {
     console.info('Action:', e.action);
     console.info('Text:', e.text);
     console.info('Trigger:', e.trigger);
 alert("¸´ÖƳɹ¦");
     e.clearSelection();
 });

 clipboard.on('error', function(e) {
     console.error('Action:', e.action);
     console.error('Trigger:', e.trigger);
 });
 </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. HDU [P1151] Air Raid

    二分图匹配求DAG图上的最小路径覆盖 应用了拆点的思想,将DAG图上的每一个点拆成二分图的x集合与y集合,对于一条有向边u->v来说,我们在ux与vy之间连一条边,然后求二分图的最大匹配 DAG ...

  2. css模板

    最近好多人问我博客的css模板.... 现在是高三,没多少时间,趁放假赶紧更一下 主体就是把博客园的一个模板改动了一点 上面的图片特效,也是从别人那里得到的代码,大致就是下面那些,下面的三个图片换成自 ...

  3. BZOJ 4568: [Scoi2016]幸运数字 [线性基 倍增]

    4568: [Scoi2016]幸运数字 题意:一颗带点权的树,求树上两点间异或值最大子集的异或值 显然要用线性基 可以用倍增的思想,维护每个点向上\(2^j\)个祖先这些点的线性基,求lca的时候合 ...

  4. GSS1

    于是我拿合并返回节点的线段树(我也不知道应该叫什么名)水了一下$GSS1$ 比$NOIp$之前写的不知道高到哪里去了,并且只用了$\frac{1}{3}$的时间 #include <iostre ...

  5. BZOJ 3669: [Noi2014]魔法森林 [LCT Kruskal | SPFA]

    题目描述 为了得到书法大家的真传,小 E 同学下定决心去拜访住在魔法森林中的隐 士.魔法森林可以被看成一个包含 n 个节点 m 条边的无向图,节点标号为 1,2,3,…,n,边标号为 1,2,3,…, ...

  6. 解决asp.net MVC中 当前上下文中不存在名称“model” 的问题

    在vs2013下打开同事上传的cshtml视图文件报错,出现当前上下文中不存在名称“model”,ViewBag,Url等等,在视图中也没有智能提示了:但是不影响编译运行,只是开发时候比较麻烦,但在同 ...

  7. GitLab简单使用

    [权限] ①已经搭建了Gitlab服务器,并已开通  http://git.******.com 权限(每个公司的git地址不一致),登陆到git中去: ②已经开通了项目权限(有专人负责开通): 当开 ...

  8. nginx + tomcat实现负载均衡

    作者Mr.Chen,转载请注明博客出处:http://www.cnblogs.com/cjh-notes/ 负载均衡 负载均衡就是流量分发,优选软件解决方案,成本低效果好. 实现步骤 第一步:下载安装 ...

  9. vscode php跳转

    最近在写一个php项目,最后选定使用vscode编辑器,然后研究了一下断点调试.格式代码.点击跳转 以下是配置步骤,记录一下 1.代码格式化及跳转  1.前提条件:安装7.0以上版本php,     ...

  10. MTU介绍以及在windows和linux下怎么设置MTU值

    最大传输单元MTU(Maximum Transmission Unit,MTU)是指一种通信协议的某一层上面所能通过的最大数据包大小(以字节为单位).最大传输单元这个参数通常与通信接口有关(网络接口卡 ...