clipboardjs 剪切板插件

引入脚本

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

使用

1. 判断浏览器兼容性

   
   
   浏览器兼容明细

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

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

//--html

复制
//--js
new ClipboardJS('.btn');

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

剪切

4. 复制一段特定文字

Copy to clipboard

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

Copy to clipboard2
//--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);
});