js 实现文本选中与复制

蓓蕾心晴

发布于 2022-10-30 13:54:02

8.9K0

发布于 2022-10-30 13:54:02

文章被收录于专栏：前端小叙

方法一：

selection api 配合 createRange api 配合 document.execCommand('copy', true)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS选中文字复制文本内容</title>
</head>
<body>
<div onmouseup="copySelectTest(this)">我是被复制的内容</div>
<div onmouseup="copySelectTest(this)">我是被复制的内容2</div>
<script type="text/javascript">
    function selectElementText(el) {
        if (document.selection) {   // IE8 以下处理
            var oRange = document.body.createTextRange();
            oRange.moveToElementText(el);
            oRange.select();
        } else {
            var range = document.createRange(); // create new range object
            range.selectNodeContents(el); // set range to encompass desired element text
            var selection = window.getSelection(); // get Selection object from currently user selected text
            selection.removeAllRanges(); // unselect any user selected text (if any)
            selection.addRange(range); // add range to Selection object to select it
        }
    }

    function copySelectionText() {
        var copysuccess; // var to check whether execCommand successfully executed
        try {
            copysuccess = document.execCommand("copy"); // run command to copy selected text to clipboard
        } catch (e) {
            copysuccess = false;
        }
        return copysuccess;
    }

    function copySelectTest(e) {
        selectElementText(e); // select the element's text we wish to read
        var copysuccess = copySelectionText();
        if (copysuccess) {
            alert('已成功复制')
        }
    }
</script>
</body>
</html>

注意：这个方法只能是纯文本元素，如果像 input 、 textarea 表单元素，传入后无法进行选中，对于表单元素，可以通过执行 select() 方法，来进行复制

// 创建输入框
var textarea = document.createElement('textarea');
document.body.appendChild(textarea);
// 赋值
textarea.value = '复制的文本内容...';
// 选中
textarea.select();
// 复制
document.execCommand('copy', true);

document.execCommand注意：

copy 命令执行方法，第二个参数要传入 true，否则不生效；

虽然很好用，但官方文档已不推荐使用

MDN第二个参数的解释：一个布尔值，指示是否应显示默认用户界面。这在 Mozilla 中没有实现。

方法二：

if (navigator.clipboard) {
    navigator.clipboard.writeText(text);
}

注意：但是我在 chrome 下试了，navigator 下没有 clipboard 方法

贴下张鑫旭写的综合两种方法的代码：

var text = '被复制的内容，啦啦啦~';
if (navigator.clipboard) {
    // clipboard api 复制
    navigator.clipboard.writeText(text);
} else {
    var textarea = document.createElement('textarea');
    document.body.appendChild(textarea);
    // 隐藏此输入框
    textarea.style.position = 'fixed';
    textarea.style.clip = 'rect(0 0 0 0)';
    textarea.style.top = '10px';
    // 赋值
    textarea.value = text;
    // 选中
    textarea.select();
    // 复制
    document.execCommand('copy', true);
    // 移除输入框
    document.body.removeChild(textarea);
}

参考文档：https://www.jianbaizhan.com/article/618

https://www.zhangxinxu.com/wordpress/2021/10/js-copy-paste-clipboard/

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-10-28，如有侵权请联系 cloudcommunity@tencent.com 删除

https