2019.10.20-Week-copy拷贝功能

1.复制功能

经常遇到拷贝复制功能的开发，在项目中总结了现有拷贝功能的常见实现方法，并对其优缺点进行比较分析，便于今后开发中拷贝功能的快速实现。

2.实现方法及原理

现在常见的方法主要是以下两种：

1. 第三方库：clipboard.js
2. 原生方法：document.execCommand()

1.document.execCommand

MDN 上定义：

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) 方法返回一个 Boolean 值，表示操作是否成功。

aCommandName ：表示命令名称，比如：

• copy拷贝当前选中内容到剪贴板
• cut拷贝当前选中内容到剪贴板等
• aShowDefaultUI：是否展示用户界面，一般情况下都是 false
• aValueArgument：有些命令需要额外的参数，一般用不到

兼容性：

这个方法在之前的兼容性其实是不太好的，但是好在现在已经基本兼容所有主流浏览器了，在移动端也可以使用。 意思就是可以允许运行命令来操作可编辑区域的内容，注意，是可编辑区域。

• 功能实现--从输入框复制

页面上有一个input标签，复制其中的内容：

<!--   HTML -->
<input id="demoInput" value="hello world">
<button id="btn">点击复制</button>
<!--   JavaScript -->
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
    const input = document.querySelector('#demoInput');
    input.select();
    if (document.execCommand('copy')) {
        document.execCommand('copy');
        console.log('复制成功');
    }
})

• 功能实现--其它地方复制

页面上并没有input标签，可能需要从一个div中复制内容，或者直接复制变量。 在 execCommand() 方法的定义中提到，它只能操作可编辑区域，也就是意味着除了input、textarea这样的输入域以外，是无法使用这个方法的。

<!--   HTML -->
<button id="btn">点击复制</button>
<!--   JavaScript -->
const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
    const input = document.createElement('input');
    document.body.appendChild(input);
    input.setAttribute('value', '复制内容');
    input.select();
    if (document.execCommand('copy')) {
        document.execCommand('copy');
        console.log('复制成功');
    }
 document.body.removeChild(input);
})

2. clipboard.js

工程中复制功能就是借助于clipboard.js插件实现的，使用方法如下：

<!--   HTML -->
<input type="text" id="copyValue" />
<button type="button" data-clipboard-target='#copyValue' id="bar">复制1</button>

<!--   JavaScript -->
const clipboard = new Clipboard('button');
clipboard.on('success',function(e){
    e.clearSelection(); //清除输入框
    $('#bar').focus();
    $('#bar').select();
    $('#bar').text('已复制');
    return false;
});
clipboard.on('error',function(e){
    e.clearSelection();
    alert('复制失败');
});

注意到，在 <button>标签中添加了一个data-clipboard-target 属性，它的值是需要复制的 <input> 的 id，即从整个标签中复制内容。

有的时候我们需要在复制后做一些事情，这时候就需要回调函数的支持，复制成功、失败后执行的回调函数通过on方法监听成功、失败事件，进行相应处理。

3.优缺点比较

1. Clipboard.js 近几年使用较多，体积相对小，兼容性可以接受，使用还比较方便。 execCommand 新兴势力，safari等主流浏览器正在努力兼容
2. Clipboard.js 较小，4KB； execCommand是document方法，不用插件

4.总结

其实Clipboard插件本质上也是封装了selection和execCommand方法实现的拷贝功能。

在项目开发中，大量copy功能的实现使用插件较为方便，比如工程已经提供Clipboard.js插件的引用；在一些别的活动页面开发时，为了一两个页面中的拷贝功能实现也不需要插件的引用，直接使用document.execCommand方法。