clipboardjs 剪切板插件

引入脚本

https://clipboardjs.com/dist/clipboard.min.js

使用

1. 判断浏览器兼容性

   
   浏览器兼容明细

if(typeof ClipboardJS != 'undefined' && ClipboardJS.isSupported()){
  //初始化
}else{
  console.log('浏览器不支持copt/cut，(⊙︿⊙)');
}

2. 给按钮添加[ 复制 ]事件

//--html
<input id="inputarea" value="一段文字" />
<a class="btn" data-clipboard-target="#inputarea" href="javascript:void(0);">复制</a>
//--js
new ClipboardJS('.btn');

3. 给按钮添加[ 剪切 ]事件

<a class="btn" data-clipboard-target="#inputarea" data-clipboard-action="cut" href="javascript:void(0);">剪切</a>

4. 复制一段特定文字

<button class="btn" data-clipboard-text="一段指定的复制文字">Copy to clipboard</button>

5. 从属性上取一个复制文字

<button class="btn2" copystr="一段指定的复制文字2">Copy to clipboard2</button>
//--js
new ClipboardJS('.btn2', {
  text: function(trigger) {
    return trigger.getAttribute('copystr');
  }
});

事件处理函数相关

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);
});