JS点击按钮复制内容到粘贴板中

写在前面
有时候，我们文章中有一段经典代码或者精彩内容，可能会被人复制引用，如果用鼠标选择，非常不友好，尤其是移动端。这时候我们可以给该内容添加点击事件，比如双击复制到粘贴板。下面我们来具体说一下实现方法（默认安装了jQuey）。

方案介绍

我看了很多网上的文章，目前有2种方案。
js原生方法：document.execCommand()
第三方库：clipboard.js
下面来分别介绍这两种方法的内容

js原生方法

第一种是使用js原生方法：document.execCommand()。这个方法在之前的兼容性其实是不太好的，但是好在现在已经基本兼容所有主流浏览器了，在移动端也可以使用（自测ios企业微信中无法复制，建议使用第二种方法）。

execCommand兼容性

定义

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

参数说明

方法返回一个 Boolean 值，如果命令不受支持或禁用，则为false。

aCommandName ：命令名称，例如： copy，更多命令查看execCommand官方说明；
aShowDefaultUI：是否展示用户界面，一般情况下都是 false；
aValueArgument：对于需要输入参数的命令，是提供该信息的DOMString。

举例说明

<div>
    <label>复制内容：</label>
    <input type="text" id="copy">
    <button type="button" id="copybtn">复制</button>
</div>
...
<script type="text/javascript">
  $(document).ready(function(){
   $('#copybtn').bind('click',function () {
      const input = document.querySelector('#copy');
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        console.log('复制成功');
      } else {
        console.log('复制失败');
      }
    });
  });
</script>

第三方库clipboard.js

clipboard的使用非常简单，下面举例来说一下，更多内容可以查看clipboard官网。

引入clipboard.js库文件

可以把该库文件下载在本地再引用，本文直接引用clipboard官网的CDN

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

HTML和逻辑代码

<div>
    <label>复制内容：</label>
    <input type="text" id="copy">
    <button type="button" data-clipboard-target="#copy">复制</button>
</div>
...
<script type="text/javascript">
  $(document).ready(function(){
    var clipboard = new ClipboardJS('#btnCopyLink'); // 点击按钮复制到粘贴板
    clipboard.on('success', function(e) { // 复制成功后运行函数
      console.log('复制成功！');
      e.clearSelection();
    });
  });
</script>

最后编辑于：2019.07.11 18:48:39