h5 商城订单号实现一键复制+clipboard.js（pc，ios,android均可使用）

1.在移动项目中订单号复制功能，兼容pc和ios、android

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			html,body{
				width:100;
			}
			p{
				height:40px;
				width:100%;
			}
			i{
				color:#D72926;
			}
		</style>
	</head>
	<body>
		<p class="top"><span>订单号</span><span><str id="fe_text">1111111111111</str><i id="d_clip_button" data-clipboard-target="str">复制</i></span></p>
	</body>
</html>
<script type="text/javascript" src="js/clipboard.min.js"></script>
<script>
	var clipboard = new Clipboard('#d_clip_button');
    clipboard.on('success', function(e) {
        console.log(e);
        alert('复制成功')
    });
	clipboard.on('error', function(e) {
       console.log(e);
       alert('请重新复制')
    });
</script>d_clip_button

data-clipboard-target：标明需要复制内容所在的标签名。d_clip_button：复制方法类型。 fe_text：包含复制文本内容的标签id名

其他不同的复制方式不在此多说，代码都是类似的。

来源：CSDN

作者：husky花

链接：https://blog.csdn.net/hflxia/article/details/79609772

标签

订单号

商城

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!