jquery复制到剪贴板
<!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复制到剪贴板的更多相关文章
- 【转】js实现复制到剪贴板功能，兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 【原】js实现复制到剪贴板功能，兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 黄聪：JS实现复制到剪贴板功能，兼容所有浏览器（转）
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能
相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...
- JQuery实现复制到剪贴板功能
在网页中实现复制到剪贴板功能,有两种方法, 第1种方法:使用JavaScript自带的方法,但是这种方法只能在IE下使用. document.execCommand("Copy") ...
- 【转载】兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能
文章转载自 代码家园 http://www.daimajiayuan.com/ 原文链接:http://www.daimajiayuan.com/sitejs-17973-1.html原文摘要: 相信 ...
- 【转】js插件zClip实现复制到剪贴板功能
相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...
- 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flas ...
- ZeroClipboard 复制到剪贴板
使用 ZeroClipboard 可以简单的将内容复制到剪贴板,通过 Adobe Flash 和 JavaScript 来实现.“Zero” 意义为这个类库没有界面,界面需要由你来建立. 版本: Ze ...
随机推荐
- ZBrush中如何清除遮罩
在之前的学习中我们知道在ZBrush®中如何创建遮罩,在创建遮罩时怎样进行反转来选择反选遮罩,本文将详细讲解ZBrush中如何清除遮罩,当我们利用遮罩达到预期效果时就需要将遮罩清除了:或者在做了遮罩的 ...
- 路飞学城Python-Day19（Py_Notes）
# 先定义类 class LuffyStudent: school = 'luffy' def learn(self): print('学习使我快乐') def eat(self): print('吃 ...
- 基于selectors模块实现并发的FTP
import socketimport os,sysBASE_DIR = os.path.dirname(os.path.abspath(__file__)) class selectFtpClien ...
- Centos7下安装Mongodb
Mongodb网盘路径:链接:https://pan.baidu.com/s/1rWJCPZ59EAW25ha1UF5czw 密码:u3zq 1.把安装包上传到linux服务器上,解压,然后我们把mo ...
- 闭包、this、ES6特性
声明一个函数 function fun1 函数内定义一个变量比如 var x=1 如果这时候在function内声明一个函数 fun2 fun2中对这个函数外面的x进行操作 这时候把fun2的地址付给 ...
- POJ 1883 排序 ( 水 + next_permutation )
链接:传送门 题意:略 思路:next_permutation(),水,但是要注意一点的是如果是最后一个排列next_permutation会返回第一个排列并结束,所以如果到了最后一个排列还不是第k个 ...
- Vue生命周期函数的应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5 基础测试题
HTML5 基础测试题 1.HTML5 之前的 HTML 版本是什么?() A.HTML 4.01 B.HTML 4 C.HTML 4.1 D.HTML 4.9 2.HTML5 的正确 d ...
- 2015 Multi-University Training Contest 7 hdu 5375 Gray code
Gray code Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total S ...
- angular-HTML DOM
ng-disabled用法 <div ng-app="" ng-init="mySwitch=true"> <p> <button ...