经常见到网页上点击按钮，就能复制某端文字，今天来实现下。
目录
1.使用input 实现
2.使用cli
0
效果图
1
使用input 实现
JS 要获取某段文字最好是触发，onselect 事件，这个就能获得选中的内容。
那就加个 input 。
实现源码：
代码语言：javascript复制<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取openid</title>
<style>
body{ text-align:center;}
.p1{ line-height:200px; font-size:40px;}
.download{ width:80%; margin:auto;}
.download a{ width:100%; height:120px; background-color:#4da2fd; display:block; line-height:120px; color:#fff; font-size:40px;text-decoration:none;}
.download p{ width:100%; line-height:30px; color:#555; font-size:35px;}
</style>
</head>
<body>
<p id="p1" class="p1">ASDDDDDDDDDDD</p>
<div class="download">
<a href="javascript:;" onclick="copy()">复制</a>
<input id="input_openid" type="text" />
<p id="p2"></p>
</div>
<script>
function copy() {
var openid= document.getElementById("p1").innerText;
document.getElementById('p2').innerText = "复制成功";
document.getElementById('input_openid').value = openid
document.getElementById('input_openid').select();
document.execCommand("Copy");
}
</script>
</body>
</html>
但是这里需要设置下 input 的样式，不要让他展示出来，但是又不能设置为 hidden。
2
clipboard.min.js实现
代码语言：javascript复制clipboard.js是一个github上的开源项目，可以实现纯 JavaScript
（无 Flash）的浏览器内容复制到系统剪贴板的功能。
github地址：https://github.com/Superheroo/copy-text/tree/master实现源码：
代码语言：javascript复制<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取openid</title>
<style>
body{ text-align:center;}
.p1{ line-height:200px; font-size:40px;}
.download{ width:80%; margin:auto;}
.download a{ width:100%; height:120px; background-color:#4da2fd; display:block; line-height:120px; color:#fff; font-size:40px;text-decoration:none;}
.download p{ width:100%; line-height:30px; color:#555; font-size:35px;}
</style>
</head>
<body>
<p id="target" class="p1">ASDDDDDeeeewwwDDDDDD</p>
<div class="download">
<a href="javascript:;" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">复制</a>
<p id="p2"></p>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/clipboard.min.js"></script>
<script>
$(document).ready(function () {
//id="target" 的文本内容是被复制的内容
var targetText = $("#target").text();
// id="copy_btn" 是点击的按钮
var clipboard = new ClipboardJS('#copy_btn');
clipboard.on('success', function (e) {
e.clearSelection();
$("#p2").text("复制成功")
});
});
</script>
</body>
</html>END
