简单的jquery一键复制值到剪切板--clipboard

最新推荐文章于 2024-06-21 09:46:52 发布

中二程序员

最新推荐文章于 2024-06-21 09:46:52 发布

阅读量4.7w

点赞数 4

分类专栏： jquery前台

本文链接：https://blog.csdn.net/penyoudi1/article/details/53419259

版权

jquery前台专栏收录该内容

2 篇文章 0 订阅

订阅专栏

笔者再开发中遇到了新的需求，把生成的链接通过一个按钮直接复制到剪切板让用户复制给其他人或浏览器访问，原本以为jquery应该有封装好的方法，查询后发现没有，找了很多js发现大部分是通过swf文件来做的，不好用，也比较麻烦一些，而js写的方法又必须用户自己去修改浏览器的配置，体验性太差，终于找到了一个clipboard，无需通过其他文件，引入一个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 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>

写了四种常用的方法，官方demo中还有其他一些方法供参考

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

下载链接（官方资源和个人demo）：http://download.csdn.net/detail/penyoudi1/9698805

中二程序员

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
11
评论
简单的jquery一键复制值到剪切板--clipboard

笔者再开发中遇到了新的需求，把生成的链接通过一个按钮直接复制到剪切板让用户复制给其他人或浏览器访问，原本以为jquery应该有封装好的方法，查询后发现没有，找了很多js发现大部分是通过swf文件来做的，不好用，也比较麻烦一些，而js写的方法又必须用户自己去修改浏览器的配置，体验性太差，终于找到了一个clipboard，无需通过其他文件，引入一个clipboard.js文件即可使用，简单方便，下附测
复制链接

扫一扫

专栏目录