<!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>

　

下载地址  https://github.com/zenorocha/clipboard.js

　

jquery复制到剪贴板的更多相关文章

  1. 【转】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  2. 【原】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  3. 黄聪：JS实现复制到剪贴板功能，兼容所有浏览器（转）

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  4. 兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

  5. JQuery实现复制到剪贴板功能

    在网页中实现复制到剪贴板功能,有两种方法, 第1种方法:使用JavaScript自带的方法,但是这种方法只能在IE下使用. document.execCommand("Copy") ...

  6. 【转载】兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

    文章转载自 代码家园 http://www.daimajiayuan.com/ 原文链接:http://www.daimajiayuan.com/sitejs-17973-1.html原文摘要: 相信 ...

  7. 【转】js插件zClip实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

  8. 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

    Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flas ...

  9. ZeroClipboard 复制到剪贴板

    使用 ZeroClipboard 可以简单的将内容复制到剪贴板,通过 Adobe Flash 和 JavaScript 来实现.“Zero” 意义为这个类库没有界面,界面需要由你来建立. 版本: Ze ...

随机推荐

  1. mySql 使用 SQL 文件脚本 failed to open file 注意事项

    1.路径不要有中文,其实最好是全英文 2.路径可以有空格 3.路径两头不要加引号 4.作为一个MySQL命令,source C:/lib/a.sql; 后边的分号是要的. 5.使用 unix 路径风格 ...

  2. IETF透露HTTP over QUIC 将重命名为HTTP/3 协议

    周一,IETF透露它将HTTP-over-QUIC实验协议重命名为HTTP / 3.HTTP-over-QUIC是一种HTTP重写,用TCP替换TCP. 如果这看起来有点为时过早,那么它与IETF的历 ...

  3. KVM虚拟机相关步骤

    KVM是Kernel-based Virtual Machine的简称,是一个开源的虚拟化模块,该文档是基于CentOS 7.4环境操作的 一.操作系统安装 本文采用的是CentOS 7.4 1.查看 ...

  4. oracle截取某一个字符之前或之后的值；substr();instr()

    函数介绍: 截取的函数: substr(?,?); substr(?,?,?); 获取目标字符出现的位置: instr(? , ? , ? ); instr( ? , ? , ? , ? ) 例: 字 ...

  5. JAVA 重载方法，参数为NULL时，调用的处理 （精确性原则）

    引子:大家可以思考一下下面程序的输出结果 public class TestNull { public void show(String a){ System.out.println("St ...

  6. Vue经典开源项目

    Vue常用的开源项目和插件库 UI组件 element ★34,784 - 饿了么出品的基于Vue2的web UI工具套件storybook ★33,503 - 响应式UI 开发及测试环境Vux ★1 ...

  7. tcpdump的使用以及参数详解

    平时分析客户端和服务器网络交互的问题时,很多情况下需要在客户端和服务器抓包分析报文.一般win下抓包使用WireShark即可,但是linux下就需要用到tcpdump了,下面是一些对于tcpdump ...

  8. 洛谷 P2243 电路维修

    P2243 电路维修 题目背景 Elf 是来自Gliese 星球的少女,由于偶然的原因漂流到了地球上.在她无依无靠的时候,善良的运输队员Mark 和James 收留了她.Elf 很感谢Mark和Jam ...

  9. 非典型的scala程序及其编译后的结果

    初学Scala Folder structure以及部分代码 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2xldmVyd3lx/font/5a6L5L ...

  10. bzoj2768: [JLOI2010]冠军调查(双倍经验最小割)

    2768: [JLOI2010]冠军调查 题目:传送门 题解: 双倍经验(1934) 代码: #include<cstdio> #include<cstring> #inclu ...