[FE] 拷贝文本到剪切板

将文本拷贝到剪切板，是一个经常遇到的问题，
不过目前 Clipboard API 还处于 Draft 状态，
而有些时候又不想引入 clipboard.js。

例如在编写 Tampermonkey 脚本的时候，
我们需要简易实现一下拷贝文本到剪切板的操作。

这时候可以参考 Copying text to clipboard with JavaScript 来实现，
github: clipboard.js也应用了同样的原理。

1. 详细步骤

（1）创建一个隐藏的textarea，将待拷贝的文本放到其中

t = document.createElement('textarea');
t.value = 'hello';
t.style.visibility = true;

（2）将textarea，加入文档流中

document.body.appendChild(t);

（3）选中textarea中的内容，调用document.execCommand

t.select();
document.execCommand('copy');

（4）删除textarea

t.parentElement.removeChild(t);

2. 汇总一下

const copyToClipboard = text => {

    // 创建一个隐含的textarea
    const t = document.createElement('textarea');
    t.value = text;
    t.style.visibility = true;

    // 加入文档流中
    document.body.appendChild(t);

    // 选中textarea的内容，并拷贝到剪切板
    t.select();
    document.execCommand('copy');

    // 删除隐藏的textarea
    t.parentElement.removeChild(t);
};

注：
以上代码中使用t.select()选中textarea中的内容，
这样会导致页面中原来被鼠标选中的内容失去选择，
所以，可能还需要使用 Selection API 恢复选中的内容。

const copyToClipboard = text => {

    // 获取之前选中的内容
    const selected = document.getSelection().rangeCount > 0 ? 
        document.getSelection().getRangeAt(0) : 
        null;

    // 创建一个隐含的textarea
    const t = document.createElement('textarea');
    t.value = text;
    t.style.visibility = true;

    // 加入文档流中
    document.body.appendChild(t);

    // 选中textarea的内容，并拷贝到剪切板
    t.select();
    document.execCommand('copy');

    // 删除隐藏的textarea
    t.parentElement.removeChild(t);

    // 如果之前选中了，就恢复
    !selected || 
        document.getSelection().removeAllRanges() || 
        document.getSelection().addRange(selected);
};

---

参考

Copying text to clipboard with JavaScript
MDN: Clipboard
clipboard.js
MDN: document.execCommand
MDN: Selection