本篇文章給大家帶來的內容是關於html5頁面如何?點擊複製的功能 （完整代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。
在實際工作中，有時候會遇到這樣的需求，頁面上有一個連結，不需要選中連結內容，只需要點擊複製按鈕，就可以把連結內容複寫到剪下板。這時候可以使用clipboard外掛程式來實現。以下是一個簡單的demo。
首先可以通過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屬性的值將會被複製--><p id="btn" class="js-copy" data-clipboard-text="111-從屬性複製"> <span>複製到剪下板-111</span></p><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>
：
點擊完複製按鈕後，成功回呼函數就會輸出一個對象，該對象包含了複製的內容等資訊。這個時候，在其他輸入文字的地方使用粘貼快速鍵就可以把剪下板的內容粘貼到你需要的地方了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
