web复制按钮功能实现

三种方式，两种原生js方式，一种js插件。

html代码

<div class="container my-5">
    <p id="box">这是福实打实大师空dsadada间大空间的哈实践活动卡萨很大快速</p>
    <button class="btn btn-info mb-3" id="copy">复制</button>
    <input type="text" class="form-control">
</div>

原生js方式1

$('#copy').on('click', function() {
            window.getSelection().selectAllChildren($('#box')[0]);
            document.execCommand("Copy");
            window.getSelection().removeAllRanges();
            alert("复制成功")
        }

注意一点就是，该方法必须为用户触发，因为规定是这样的，防止恶意代码操作剪贴板。

该方法原理就是将一个input元素内的value值全部复制，所以讲input原生dom对象传入window.getSelection().selectAllChildren()方法中，然后调用document.execCommand("Copy");将内容全部copy，注意，这时会触发copy事件。

然后再清除掉选中，取消元素高亮。

复制成功。

这种方法简单快捷，用于一般的要求中是可以的，假如我们要使用更高的要求，比如传入固定的文本，或者copy元素某一个属性的值，或者我们要截取某一段呢。

原生js方式2

$('#copy').on('click', function () {
    const $box = $('#box');
    const text = $box.data('text');
    const input = $('<input>').attr("value", text).prop("readonly", true);
    document.body.appendChild(input[0]);
    input[0].focus();
    input[0].setSelectionRange(0, 9999)
    document.execCommand('copy');
    window.getSelection().removeAllRanges();
    input.remove();
    alert("复制成功");
  })

我们将元素的属性内容获取到，并利用一个表单元素将内容设置为其的value，然后插入body中，并且这个input我们要考虑到手机端如果用select()方法选中的话，会调出手机的虚拟键盘。

而使用document.execCommand('copy');方法的前提是选中文本，所以方法1还要改为如下形式：

$('#copy').on('click', function() {
            $('#box').select();   
            document.execCommand("Copy");
            window.getSelection().removeAllRanges();
            alert("复制成功")
        }

为了防止虚拟键盘弹出，我们给input设置只读readonly，然后出发focus获取焦点，此时才能使用setSelectionRange(0, 9999)方法来高亮选取字段，第一个开始是开始位置，第二个是结束位置，并且是从0开始的，这样我们可以自由选取截取的文本。

高亮选中后，进行copy，copy完毕清除高亮，将inpt删除。

为什么要插入body，我个人测试的时候发现，copy它只能copy可视的内容，也就是你元素显示在html中的，连display:none这些都不行的，必须显示，所以我们要插入body中，并在拷贝完毕后销毁。

以上就是原生的复制功能。

js插件：clipboard.js

github官方地址

说明文档

由于使用简单，而且比自写的功能更完善，大神之作，我等菜鸡仰望啊，但是我又不想搞太多js插件，所以又自己研究了一下原生js的用法，反正小要求用原生更好一下，可控，代码量少，成熟项目，插件更好一些。

怎么用以后我用到了再说吧，官方文档我看了下，是es6的组件写法，如果不懂组件用法的可以看看我的另一篇关于数字跳动插件的文章，里面有讲用法。