js复制到剪贴板

Joker • • 前端笔记 • 344 阅读

     前端开发工作中，有时候需要有复制文本内容或者剪切文本内容这个需求，以前都是js和flash结合的方式实现效果，随着HTML5的登场flash已经落伍了，js和flash结合实现js复制到剪贴板效果不适用，推荐使用clipboard.js插件实现纯js复制或者剪切到剪贴板效果。

js复制到剪贴板

1.js复制到剪贴板，看下面例子



  
    
    js复制到剪贴板 
  
  
    
      我是文字我是文字我是文字我是文字我是文字我是文字我是文字
      点击复制     
                var clipboard = new ClipboardJS('#btn', {         // 通过target指定要复制的节点         target: function() {           return document.querySelector('.text');         }          //此时.text中的内容已经在剪贴板中了       });       clipboard.on('success', ()=> {         alert("复制成功！");       });       clipboard.on('error', ()=> {         alert('复制失败！');       });        

js复制到剪贴板

点击预览效果

2.js剪切到剪贴板，看下面例子



  
    
    js剪切到剪贴板
  
  
    剪切剪切剪切剪切剪切
    
      点击剪切文字 
    
    
    
    
    
      var btns = document.querySelector('.btn');
      var clipboard = new Clipboard(btns);
      clipboard.on('success', ()=> {
        alert('剪切成功！');
      });
      clipboard.on('error', ()=> {
        console.log('剪切失败！');
      });
    
  

js剪切到剪贴板

点击预览效果