据说以前要是需要 将内容复制到剪切板 这个功能时,得用到 flash。

但是现在时代不同了,前端出现了一堆新的 API(正式发布的、还在审核中的等)。今天就用一些新的 API 来完成这个功能。

用到的 API

下面的 API 的详情就不一一列出来了。

实际效果

See the Pen copy-to-clipboard by percy ( @percy507 ) on CodePen .

源代码

<!-- 一个简单的小栗子 --><buttonclass="copy-link"
    data-fulllink="要被复制的内容在这里~">复制链接</button><!-- 空白节点,缓存数据,尽量使用下面的样式将该节点隐藏起来 --><divclass="copy-area"></div>

<style>.copy-area {    position: absolute;    z-index: -1;    width: 0;    height: 0;    opacity: 0;
}
</style>

<script>function copyLink(event){    let target = event.target;    let fullLink = target.getAttribute('data-fulllink');    // 在页面上建一个空白节点,用来缓存要被复制的数据
    let copyNode = document.querySelector('.copy-area');    let range = document.createRange();    let selection = window.getSelection();

    copyNode.innerHTML = fullLink;
    range.selectNode(copyNode);    // 去除默认的选区对象
    if (selection.rangeCount > 0) {
        selection.removeAllRanges();
    }

    selection.addRange(range);    document.execCommand('copy');

    target.innerHTML = '复制成功';
}document.querySelector('.copy-link').onclick = copyLink;

</script>