复制文本到剪贴板clipboard.js简单应用

clipboard.js [官网]  [下载地址]

 

目标：点击按钮复制span中的文本内容，并提示用户

 

1.页面引入clipboard.js

<script src="js/clipboard.js"></script>

 

2.html

1 <span id="copyText">这是待复制的文字</span>
2 <div class="copy_tips"></div>
3             
4 <input type="button" class="btn" data-clipboard-action="copy" data-clipboard-target="#copyText" value="复制" />

data-clipboard-target  指向要复制内容的节点

data-clipboard-action  值为copy是复制，值为cut是剪切，cut只有在文本框和文本域才会生效

 

3.js

 1 var clipboard = new ClipboardJS('.btn');
 2 
 3 clipboard.on('success', function(e) {
 4     // console.info('Action:', e.action);
 5     // console.info('Text:', e.text);
 6     // console.info('Trigger:', e.trigger);
 7              
 8     e.clearSelection();
 9     $('.copy_tips').text('复制成功，快去粘贴吧！');
10 });
11              
12 clipboard.on('error', function(e) {
13     // console.error('Action:', e.action);
14     // console.error('Trigger:', e.trigger);
15     $('.copy_tips').text('复制失败，请手工复制！');
16 });

 

来源：https://www.cnblogs.com/hannahV587/p/8884762.html