前端复制粘贴clipBoard.js的使用

时间：2025-04-06 14:06:49
 <!DOCTYPE html>

 <html>

 <head>

     <title>ClipBoard.js使用：修改HTML</title>

     <meta charset="utf-8">

     <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

 </head>

 <body>

 <!--案例一：从另一元素复制文本：通过data-clipboard-target在触发器中添加属性来实现-->

 <input type="text" id="input">

 <button id="copy" data-clipboard-target="#input">复制input框中的内容</button>

 <textarea name="" id="" cols="30" rows="10"></textarea>

 </body>

 </html>

 <script type="text/javascript">

     var clipboard = new ClipboardJS('#copy')

     // 显示用户反馈/捕获复制/剪切操作后选择的内容

     clipboard.on('success', function (e) {

         console.info('Action:', e.action)//触发的动作/如：copy,cut等

         console.info('Text:', e.text);//触发的文本

         console.info('Trigger:', e.trigger);//触发的DOm元素

         e.clearSelection();//清除选中样式（蓝色）

     })

     clipboard.on('error', function (e) {

         console.error('Action:', e.action);

         console.error('Trigger:', e.trigger);

     });

 </script>

相关文章