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>