js 实现复制功能

最新推荐文章于 2024-03-10 10:30:51 发布

星星~笑笑

最新推荐文章于 2024-03-10 10:30:51 发布

阅读量157

点赞数

分类专栏： js h5 文章标签： js jq 复制文本兼容 ios Android H5

本文链接：https://blog.csdn.net/u014724048/article/details/91378293

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" >
  
    <title>注册</title>
</head>
<style>
*{
	-webkit-touch-callout: all;
	-webkit-user-select: all;
	-moz-user-select: all;
	-ms-user-select: all;
	user-select: all;

    -webkit-touch-callout:none;   
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;   
	-ms-user-select:none;
	user-select:none;
}
input {      
     -webkit-user-select:auto;
}
 </style>
<body>
	<input id="foo1"  value="需要复制的内容信息(input标签属性不能设置disabled)" readonly="readonly">
<!-- <div class="the_btn_con">
		<button class="btn" data-clipboard-target="#foo1">复制</button>
	</div> -->

<button class="copy" data-clipboard-target="#foo1"  data-clipboard-action="copy"  style="color: #5c5959;text-align: center;font-size: 12px;height: 40px;border: 0px solid #fff;background: 000;">
			点击复制邀请码：(点击标签必须用button才能兼容ios)
	</button>
//不需要另外的input当触发器的时候可以直接把要复制的内容赋值给点击元素
//<a href="javascript:void(0);"  class="copy" data-clipboard-text="复制的内容">复制</a>
	<!-- <script type="text/javascript" src="jquery.js"></script> -->
	<script type="text/javascript" src="clipboard.js"></script>
	<script type="text/javascript" src="clipboard.min.js"></script>
	<!-- <script> //简单的pc复制
		$(function () {
			   var clipboard = new ClipboardJS('.btn');
			   clipboard.on('success', function(e) {
				   alert('复制成功!')
				   console.log($(this))
				   e.clearSelection();
			   });
			   clipboard.on('error', function(e) {
				   alert('复制失败，请长按复制!')
			   });
		   })
	</script> -->
    <script>
			var clipboard = new ClipboardJS('.copy');
			clipboard.on('success', function(e){
				console.log(e);
				document.getElementById('foo1').blur();
				alert('复制成功啦!');
			});
			clipboard.on('error', function(e){
				alert('复制失败，请长按复制!');
			});
	</script>

</body>
</html>

注意：input标签不能设置属性：disabled

复制标签使用button才兼容IOS、Android

源代码提取链接: https://pan.baidu.com/s/112NFETMDADTiT2jJJUaCow 提取码: tyvr