jquery复制粘贴

引入一个clipboard.js文件即可使用，简单方便，下附测试代码，笔者亲测：ie ，火狐，谷歌，360有效

<!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 ClipboardJS('.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 ClipboardJS('.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 ClipboardJS('.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 ClipboardJS('.btn3'); clipboard3.on('success', function(e) {console.log(e);alert("测试4复制成功！")});clipboard3.on('error', function(e) {console.log(e);alert("测试4复制失败！请手动复制")});
})
</script>

附官方链接：点击打开链接

（转）

jquery复制粘贴相关推荐

JQuery 复制粘贴上传图片插件（textarea 和 tinyMCE）
原文地址:http://www.cnblogs.com/xishuai/p/jquery-paste-upload-image.html 开源地址:https://github.com/yuezhon ...
jQuery event的复制粘贴的坑
jQuery为了兼容性会把系统暴露出来的event重新整理一遍,但是复制粘贴的event就被丢掉了. 所以要在所有原生浏览器想实现复制粘贴,大家都用flash实现了.其实只要用原生的方法捕获事件就ok ...
为了不复制粘贴，我被逼着学会了JAVA爬虫
写在前边受疫情影响一直在家远程办公,公司业务进展的缓慢,老实讲活并没有那么多,每天吃饭.睡觉.逛技术社区.写博客,摸鱼摸得爽的很.早上本来还想在来个回笼觉,突然部门经理的语音消息就过来了. 甩给我一 ...
vue 2.x项目 vue-qriously 生成二维码并下载、cliploard复制粘贴
近日,重构项目某一老模块时,有一个功能是生成二维码并下载,还可以复制链接.列表每项都有二维码.下载二维码和复制链接和列表上方总的二维码. 老模块是用的qrocode中文文档,qrcode github ...
同时绑定onpropertychange 和 oninput 事件，实时检测 input、textarea输入改变事件，支持低版本IE，支持复制粘贴...
实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...
php android 复制粘贴板,Android_Android剪贴板用法详解，本文实例详述了Android剪贴板的 - phpStudy...
Android剪贴板用法详解本文实例详述了Android剪贴板的用法,分享给大家供大家参考.具体方法分析如下: 这里首先需要注意的一点,就是在使用Android剪贴板的时候大家只记住一点就行了,不管 ...
ZeroClipboard2跨浏览器复制粘贴
摘要:我们平时常用到的复制粘贴功能,在浏览器端,要想使用一个按钮来实现,使用原生js代码来实现,是困难的,幸好ZeroClipboard的出现,解决了这一尴尬的问题. ZeroClipboard2简介 ...
H5 vue-pdf 使用方法复制粘贴直接用
H5 vue-pdf 使用方法复制粘贴直接用 <!-- 如果印章不显示全局搜索这行代码然后注释掉重新打包就可以了 _this3.setFlags(_util.AnnotationFlag ...
网页禁止复制粘贴文字怎么办?
知识的广度来自知识的深度,学习如果不成体系那是多可怕的一件事儿,希望我们在未来的学习道路上坚守初心,不要给自己留下遗憾,以自己喜欢的方式生活,做自己喜欢做的事,宠爱自己,做一个独一无二的自己! 对于文 ...
单击按钮使用jQuery复制到剪贴板
本文翻译自:Click button copy to clipboard using jQuery How do I copy the text inside a div to the clipboa ...

jquery复制粘贴

jquery复制粘贴相关推荐

最新文章

热门文章