[前端开发] 「复制到剪贴板」的一种简单实现

陪她去流浪 桃子 2018年06月04日 编辑 阅读次数：1754

在网页与用户交互的过程中，时不时地会遇到与剪贴板进行交互。

剪贴板是系统提供的一种进程间通信的一种方式。支持写入到剪贴板和从剪贴板读取。

但是，浏览器为了安全着想，到目前为止，几乎所有的浏览器都没有提供、或是非常有限地提供对剪贴板的操作。

几种实现方式

主要的4种剪贴板操作方式：

  1. 异步剪贴板API: navigator.clipboard.writeText
  2. document.execCommand('copy')
  3. 重写 copy 事件
  4. Flash

第1种和第3种到目前为止浏览器都还没怎么实现，兼容性不好。第4种Flash的方式太古老，而且还要启动Flash插件才行。不讨论。我简单介绍一下第2种。

基于 document.execCommand('copy') + textarea 实现

这种方式借助于document.execCommand('copy')命令，调用这个方法就相当于是用于手动按下了 Ctrl+C 或 ⌘+C，也就是复制选中的文本。

所以，首先得有文本被选中，然后才执行该命令将文本复制到剪贴板。

使用<textarea>是个不错的选择，因为它有select()方法，可以直接选中所有文本。

注意：被复制的元素应该先得到焦点。（被隐藏(display:none;或visibility:hidden;)的元素是无法被设置成焦点的。）

示例代码及测试

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<button onclick="copy_text()" style="display:block;">复制内容到剪贴板</button>

<textarea id="textarea" style="width:200px;height:100px">这里是一些文本</textarea>
<textarea style="width:200px;height:100px">在这儿粘贴试试</textarea>

<script>
function copy_text() {
    var ta = document.getElementById('textarea');
    ta.focus();
    ta.select();
    if(document.execCommand('copy')) {
        alert('复制成功。');
    } else {
        alert('复制失败。');
    }
    return false;
}
</script>

当然textarea是应该被隐藏掉的，可以设置 opacity:0; 等等。就不细说了。

参考