最近项目活动中用到复制文本功能，发现在chrome中之前的clipboard的demo失效了，查了下发现是因为版本升级导致的。最新用法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.copy-link{
478px;
height: 96px;
background: #333;
margin: 28px auto 0;
font-size: 32px;
color: #ac6c44;
line-height: 86px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="link" class="link-url indent">即将被复制的内容</div>
<div onselectstart="return false" class="copy-link" data-clipboard-action="copy" data-clipboard-target="#link">复制链接</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
<script src="clipboard.js"></script>
<script>
$('.copy-link').click(function(){
var clipboard = new ClipboardJS('.copy-link');
clipboard.on('success', function(e) {
console.log(e);
alert('复制成功');
});
clipboard.on('error', function(e) {
alert('复制失败');
});
});
</script>
</html>
另附上另一种复制方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="link-box">
<div id="link-box">
<div class="link-con">
Hello World!
</div>
<div class="link-url">您的专属链接：</div>
<div class="link-url indent">hello world!!!</div>
</div>
<div onselectstart="return false" class="copy-link">复制链接</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
<script src="clipboard.js"></script>
<script>
$('.copy-link').click(function(){
copyTxt('link-box');
});
// 复制功能
function copyTxt(con) {
const range = document.createRange();
range.selectNode(document.getElementById(con));
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
alert("复制成功！");
}
</script>
</html>