浏览器复制粘贴以及手机端webview复制粘贴

一、浏览器赋值粘贴

1、document.execCommand

这部分参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

咱们再浏览器中使用的复制大部分都是用的这个原理

2、例子：

//这是一个点击方法，放到复制按钮上即可
 function copyArticle1() {
      const range = document.createRange();
      //这里的'copyBT 是要复制部分的id
      range.selectNode(document.getElementById('copyBT'));

      const selection = window.getSelection();
      if(selection.rangeCount > 0) selection.removeAllRanges();
      selection.addRange(range);
      document.execCommand('copy');
      alert("复制成功！");
      }

缺点：

1、缺点，会复制样式（比如换行）
2、在手机端的webview页面可能会出不来

二、手机端的复制

使用第一种方法在浏览器上用的是很顺畅，但是放到安卓和ios手机里面就会有各种问题。so，继续在网上找更好的复制方法

1、使用插件

插件网址：https://clipboardjs.com/

关于插件的介绍，基本使用，都可以参考这个网址

2、实例

（1）引入JS：

//这里我担心加载网络上的资源会太慢，所以复制JS部分到本地，重命名为copy.js
 <script src="/m/js/copy.js"></script>

（2）有复制按钮的情况

//在复制按钮上添加点击事件
//data-clipboard-target  这个部分是插件特有的，里面是要复制内容部分的标签id
<div  id="copy1"  data-clipboard-target="#copyBT" onclick="copyArticle1()">复制</div>
 <td id="copyBT">要复制的内容</td>
 //js部分
  var clipboard = new ClipboardJS('#copy1');
        clipboard.on('success', function (e) {
        //以下部分都可以打印出来
          console.info('Action:', e.action);
          console.info('Text:', e.text);
          console.info('Trigger:', e.trigger);
          alert("复制成功！");
          clipboard.destroy();
        });

（3）无复制按钮的情况

//data-clipboard-text  这部分对应的是你要复制的内容
<td data-clipboard-text="要复制的内容"  id="copy1" onclick="copy1()">要复制的内容</td>
//JS
 function copy1(key)
    {
        var clipboard = new ClipboardJS("#copy1");
        clipboard.on('success', function (e) {
          console.info('Action:', e.action);
          console.info('Text:', e.text);
          console.info('Trigger:', e.trigger);
          alert("复制成功！");
          clipboard.destroy();
        });
    }

3、缺点

这个复制插件有个缺点，那就是：多次点击复制，多次弹出alert

参考链接：https://blog.csdn.net/qq_33285313/article/details/78551411

**解释：**实践总结这是因为第一次来 this.clipboard= new Clipboard(’.acctnobtn’)的时候实例化了一次，返回上级界面第二次再次进入这一界面的时候又this.clipboard= new Clipboard(’.acctnobtn’)了一次，所以说再次点击会弹出两次复制成功，如果每次关掉界面前不去销毁this.clipboard 这一实例的话，每次打开这一界面就会实例化 +1，所以要想解决这个问题的话必须每次关掉这一界面前要销毁这一实例

解决方案：

需要在每次复制完毕销毁掉clipboard对象
  clipboard.destroy();

以上就是复制粘贴部分的介绍了。话说几天不写博客，界面变化真大，看起来怪怪的。

end