在實際工作中，有時候會遇到這樣的需求，頁面上有一個鏈接，不需要選中鏈接內容，只需要點擊復制按鈕，就可以把鏈接內容復制到剪切板。這時候可以使用clipboard插件來實現。以下是一個簡單的demo。
需要購買阿里雲產品和服務的，點擊此鏈接領取優惠券紅包，優惠購買哦，領取后一個月內有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07
首先可以通過npm install clipboard --save-dev 來安裝該插件
``
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>clipboard示例</title>
<script src="lib/clipboard/dist/clipboard.min.js"></script>
</head>
<body>
<h2>從屬性里復制</h2>
<!--data-clipboard-text屬性的值將會被復制-->
<div id="btn" class="js-copy" data-clipboard-text="111-從屬性復制">
<span>復制到剪切板-111</span>
</div>
<hr>
<h2>從另外一個元素復制內容</h2>
<textarea id="bar">222-從另外一個元素復制內容</textarea>
<button id="btn2" data-clipboard-target="#bar">復制到剪切板-222</button>
<hr>
<h2>JS里指定復制的內容
<button id="btn3" data-clipboard-target="#bar">復制到剪切板-333</button></h2>
<script>
//從屬性里復制
var btn = document.getElementById('btn');
var clipboard = new Clipboard(btn);//實例化
clipboard.on('success', function(e) {//復制成功執行的回調，可選
console.log(e);
});
clipboard.on('error', function(e) {//復制失敗執行的回調，可選
console.log(e);
});
//從另外一個元素復制內容
var btn2 = document.getElementById('btn2');
var clipboard2 = new Clipboard(btn2);//實例化
clipboard2.on('success', function(e) {//復制成功執行的回調，可選
console.log(e);
});
clipboard2.on('error', function(e) {//復制失敗執行的回調，可選
console.log(e);
});
//JS里指定復制的內容
var btn3 = document.getElementById('btn3');
var clipboard3 = new Clipboard(btn3, {
text: function() {
return '333-JS里指定復制的內容';
}
});
clipboard3.on('success', function(e) {//復制成功執行的回調，可選
console.log(e);
});
clipboard3.on('error', function(e) {//復制失敗執行的回調，可選
console.log(e);
});
</script>
</body>
</html>
