关于如何复制到剪切板

<!DOCTYPE html>
<html lang="en">
<body>
<button class="copy-link"
        data-fulllink="要被复制的内容在这里～">复制链接</button>

<!-- 空白节点，缓存数据，尽量使用下面的样式将该节点隐藏起来 -->
<div class="copy-area"></div>

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

<script>
    function copyLink(event) {
        var target = event.target;
        var fullLink = target.getAttribute('data-fulllink');

        // 在页面上建一个空白节点，用来缓存要被复制的数据
        var copyNode = document.querySelector('.copy-area');
        var range = document.createRange();
        var selection = window.getSelection();
        console.log(range)
        console.log(selection);

        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>
  </body>
  </html>

window.getSelection()返回一个Selection对象，Selection对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。

document.createRange()返回一个range对象，也可以通过Selection对象的getRangeAt方法取得，Range表示包含节点和部分文本节点的文档片段。

Range.selectNode()设定一个包含节点和节点内容的 Range.

addRange一个区域（Range）对象将被加入选区。

当一个HTML文档切换到设计模式(designMode)时，文档对象暴露 execCommand方法，该方法允许运行命令来操纵可编辑区域的内容,返回一个 Boolean ，如果是 false 则表示操作不被支持或未被启用。参数：

var bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

aCommandName,一个 DOMString ，命令的名称。

aShowDefaultUI,一个 Boolean 是否展示用户界面，一般为 false。Mozilla 没有实现

aValueArgument,一些命令需要一些额外的参数值

秒客网

关于如何复制到剪切板

相关文章