1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>ClipBoard.js使用：修改HTML</title> 5 <meta charset="utf-8"> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script> 7 </head> 8 <body> 9 <!--案例一：從另一元素復制文本：通過data-clipboard-target在觸發器中添加屬性來實現--> 10 <input type="text" id="input"> 11 <button id="copy" data-clipboard-target="#input">復制input框中的內容</button> 12 <textarea name="" id="" cols="30" rows="10"></textarea> 13 14 15 </body> 16 </html> 17 <script type="text/javascript"> 18 var clipboard = new ClipboardJS('#copy') 19 // 顯示用戶反饋/捕獲復制/剪切操作后選擇的內容 20 clipboard.on('success', function (e) { 21 console.info('Action:', e.action)//觸發的動作/如：copy,cut等 22 console.info('Text:', e.text);//觸發的文本 23 console.info('Trigger:', e.trigger);//觸發的DOm元素 24 e.clearSelection();//清除選中樣式（藍色） 25 }) 26 clipboard.on('error', function (e) { 27 console.error('Action:', e.action); 28 console.error('Trigger:', e.trigger); 29 }); 30 31 </script>