js复制到剪贴板

 分类:js知识时间:2021-05-28点击:

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

js复制到剪贴板

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js复制到剪贴板 </title>
  </head>
  <body>
    <div class="box">
      <div class="text">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
      <button type="button" id="btn">点击复制</button>
    </div>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
    <script type="text/javascript">
      var clipboard = new ClipboardJS('#btn', {
        // 通过target指定要复制的节点
        target: function() {
          return document.querySelector('.text');
        } 
        //此时.text中的内容已经在剪贴板中了
      });
      clipboard.on('success', ()=> {
        alert("复制成功!");
      });
      clipboard.on('error', ()=> {
        alert('复制失败!');
      });
    </script>
  </body>
</html>

js复制到剪贴板

点击预览效果

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

<!DOCTYPE html>
<html">
  <head>
    <meta charset="UTF-8">
    <title>js剪切到剪贴板</title>
  </head>
  <body>
    <textarea id="bar">剪切剪切剪切剪切剪切</textarea>
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
      点击剪切文字 
    </button>
    <br />
    <input placeholder="你可以在这里粘贴看效果" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
    <script type="text/javascript">
      var btns = document.querySelector('.btn');
      var clipboard = new Clipboard(btns);
      clipboard.on('success', ()=> {
        alert('剪切成功!');
      });
      clipboard.on('error', ()=> {
        console.log('剪切失败!');
      });
    </script>
  </body>
</html>

js剪切到剪贴板

点击预览效果

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: