js实现【复制功能】的实现方案以及完善

一、execCommand方法

复制一段文字内容实现的老牌方法就是document.execCommand('copy',true)了，而且兼容性 非常的好。

不过也有几点要注意的地方

1. 执行有限制

• 首先，必须文字内容选中，再执行execCommand()方法才有效，如何让文字选中呢？

常用方法就是穿件一个textArea元素，给这个元素赋值后再选中。

但是实际开发，怎么可能在页面上多出一个输入框呢？

所以通常是用js创建一个隐藏的输入框，赋值，选中，然后复制，最后将该元素移除dom。

• 其二，当输入框不在页面的可视区域内的时候，此时执行textarea.select()方法会触发浏览器的默认跳转行为，滚动条会进行重定位。

所以创建的文本域，务必要保证在屏幕区域内，否则复制行为执行的时候，会出现体验问题。

2.性能隐患

该API是同步执行复制操作的，如果需要复制的文本过于多，则会造成性能消耗，导致页面的卡顿。

3.复制的内容不可更改

使用 execCommand() 方法复制的文字内容，是无法进行修改与替换的，这其实是不友好的，因为对复制或拖拽的本文内容进行处理还是比较常见的。

正是由于以上一些限制，execCommand() 已经是不推荐的使用的方法，业界推荐使用全新的 Clipboard API。

二、Clipboard API

使用 clipboardAPI就非常简单了

if(navigator.clipboard){
    navigator.clipboard.writeText('需要复制的内容')
}

无需浏览器权限申请，文字内容直接进入剪切板，代码简单，使用方便，同时是异步，不用担心阻塞。

然而，兼容性这块的不足实在是让人遗憾。

三、整合封装代码

我们可以结合二者，封装成一个公共的 复制功能 函数

##### HTML代码：

<button id="button">点击按钮复制</button>

##### JS代码：

button.addEventListener('click', function () {
    var text = '被复制的内容，啦啦啦~';
    if (navigator.clipboard) {
        // clipboard api 复制
        navigator.clipboard.writeText(text);
    } else {
        var textarea = document.createElement('textarea');
        document.body.appendChild(textarea);
        // 隐藏此输入框
        textarea.style.position = 'fixed';
        textarea.style.clip = 'rect(0 0 0 0)';
        textarea.style.top = '10px';
        // 赋值
        textarea.value = text;
        // 选中
        textarea.select();
        // 复制
        document.execCommand('copy', true);
        // 移除输入框
        document.body.removeChild(textarea);
    }
});