复制裁剪文本的那点事

复制裁剪文本的那点事

使用clipboard.js 剪贴板实现裁剪、复制文本功能
clipboard.js 官方文档https://clipboardjs.com/
1、npm安装

npm install clipboard --save

或者 直接引用压缩包的js

<script type="text/javascript" src="js/clipboard.min.js"></script>

2、引用后需要实例化

new ClipboardJS('.btn');

3、实例
html

<button class="copy" data-clipboard-target=".info"><span class="info" >需要复制的文本 </span></button><span style="color: red;">（点击可复制）</span>

JavaScript

var clipboard = new ClipboardJS('.btn'); 
clipboard.on('success', function(e) { 
console.info('Action:', e.action);
 console.info('Text:', e.text) ;
  console.info('Trigger:', e.trigger); 
  e.clearSelection(); 
  }); 
  clipboard.on('error', function(e) { 
  console.error('Action:', e.action); 
  console.error('Trigger:', e.trigger);
   });

整体代码

<script type="text/javascript" src="js/clipboard.min.js"></script>
<button class="copy" data-clipboard-target=".info">
<span class="info" >需要复制的文本 </span>
</button>
<span style="color: red;">（点击可复制）</span>
<script>
var clipboard = new ClipboardJS('.btn'); 
clipboard.on('success', function(e) { 
console.info('Action:', e.action);
 console.info('Text:', e.text) ;
  console.info('Trigger:', e.trigger); 
  e.clearSelection(); 
  }); 
  clipboard.on('error', function(e) { 
  console.error('Action:', e.action); 
  console.error('Trigger:', e.trigger);
   });
</script>

注意：如果使用裁剪功能，仅对<input>或起作用<textarea>生效，您可以定义一个data-clipboard-action属性来指定是否要copy或cut内容。默认为copy
还有几种使用方法

例如，如果要动态设置target，则需要返回一个Node。

new ClipboardJS('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }

如果要动态设置text，则将返回String。

new ClipboardJS('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});