用Javascript如何拷贝指定文字？

页面上给用户提供一串字符(通常是URL或者分享代码)，然后旁边有个拷贝按钮可以让用户直接点击复制是个很常见的简单的功能．但真的要去做的时候，发现一切并没有我理想当中的那么简单．
浏览器为了确保是用户自己做的操作，复制的内容必须是“选中”的，“可见”的。除此之外，还需要考虑头疼的浏览器兼容问题。

“选中”的复制内容

选中不光可以通过用户操作，也可以通过JS：

• 用任意HTML，通过SelectionAPI添加一个选中的Range对象

var range = window.getSelection().getRangeAt(0);
range.selectNode(document.getElementById("copy-field"));
window.getSelection().addRange(range);

Selection API浏览器支持：

• 用Input，　Textarea的select()选中更方便

var input = document.querySelector('.copy-field');
input.select();

复制

try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
} catch (err) {
    console.log('Oops, unable to copy');
}

document.execCommand可以用于复制、剪切等操作，返回一个boolean表示复制是否成功。
浏览器支持：
!execCommand的浏览器支持](https://img-blog.csdn.net/20180114195719551?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamVubmllamk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

必须“可见”

说可见可能并不那确切，因为我们可以通过适当的CSS来把选中内容遮盖起来，但对浏览器来说依旧是可见的状态。
经测试，设置以下CSS（包括父级元素）都会让复制失败：

.copy-field {
    display: none;
}

.copy-field {
    visibility: hidden;
}

.copy-field {
    width: 0;
}

.copy-field {
    height: 0;
}

这种情况下，可以考虑利用一个父级元素来帮忙将它推出用户可见范围外：

.parent-element {
    position: relative;
    overflow: hidden;
}
.copy-field {
    position: absolute;
    left: 100%;
}