如何通过JS实现将指定内容复制到剪贴板

如何通过JS将指定内容复制到剪贴板？

就目前来讲最简单有效的方式还是使用js的execCommand()。为保证复制功能的正常运行，需要解决以下几个问题：

一、execCommand()在复制内容时，只能从可输入控件中复制内容

因此当你需要复制非可输入元素（如div）中的内容时，需要先完成将内容转化为可输入控件中的内容这一步骤。在这里我们通过在文档中添加子节点input的方式执行

二、在手机或其它可移动设备上，当我们点击复制时，添加的子节点实际处于激活状态，会自动弹出输入键盘

因此我们需要给节点添加readonly属性。

需要注意的是：子节点只有处于"可视化"的状态下，才能够完成正确的复制操作。即不能有以下任一情况出现：

1、input中存在disabled属性

2、width||height的值为0;

3、有hidden、display:none等属性存在

可以使用readonly或opacity:0;

完整代码如下：

$(function() {
    $(".copy").click(function() {
        //要复制的内容，防止内容被转义，使用.text()而不是.html()
        var content = $(this).siblings("code").text();

        //创建可输入控件，因为execCommand方法只能从input,textarea等可输入控件中复制内容
        const input = document.createElement('input');
        //将属性设为只读，防止手机中呼出键盘
        input.setAttribute('readonly', 'readonly');
        //将要复制的内容写入控件的value中
        input.value = content;
        //input.setAttribute('value', content);
        document.body.appendChild(input);
        input.setSelectionRange(0, 9999); //控制输入光标位置
        input.select(); //选择内容
        document.execCommand('copy'); //执行复制
        document.body.removeChild(input);
        if (content != '') {
            //改变按钮颜色并添加复制成功提示
            $(this).addClass("copied").text("复制成功");
            // 解决setTineout中不支持$(this)的问题
            var ts = $(this);
            //延时3秒后还原按钮颜色
            setTimeout(function() {
                ts.removeClass("copied").text("复制");
            }, 3000);
        }
    });
});