html5頁面實現點選複製功能
阿新 • • 發佈：2020-12-14
在實際工作中，有時候會遇到這樣的需求，頁面上有一個連結，不需要選中連結內容，只需要點選複製按鈕，就可以把連結內容複製到剪下板。這時候可以使用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>