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

 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>

 

posted @ 2018-09-20 17:52  前端极客  阅读(11363)  评论(0)  编辑  收藏  举报