JS实现复制文本功能_js 复制文本-CSDN博客

博客介绍了JS核心API，可代替手动实现自动选中文本，并将选中内容复制到剪贴板，返回布尔值，若为false表示操作不被支持或未启用，最后给出了相关代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心api:

textArea.select(); 代替手动实现自动选中文本
document.execCommand("Copy") 复制选中内容到剪贴板，返回值是一个boolean值，如果是 false 则表示操作不被支持或未被启用。了解更多

废话少说直接上代码

// 1. 创建
// 自调用Clipboard函数返回值为一个对象，该对象有一个copy方法，将该对象挂到全局window上，以便在项目的任何地方都能使用
window.Clipboard = (function (window, document, navigator) {
    var textArea; // 文本域Dom对象
    var copy; // 复制函数
    // 判断是不是ios端
    function isOS() {
        return navigator.userAgent.match(/ipad|iphone/i);
    }
    //创建文本元素
    function createTextArea(text) {
        textArea = document.createElement('textArea');
        textArea.value = text;
        document.body.appendChild(textArea);
    }
    //选择内容
    function selectText() {
        var range, selection;
        if (isOS()) {
            range = document.createRange();
            range.selectNodeContents(textArea);
            selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            textArea.setSelectionRange(0, 999999);
        } else {
            textArea.select();
        }
    }
    //复制到剪贴板
    function copyToClipboard() {
        try {
            if (document.execCommand("Copy")) {
                alert("复制成功！");
            } else {
                alert("复制失败！请手动复制！");
            }
        } catch (err) {
            alert("复制错误！请手动复制！")
        }
        document.body.removeChild(textArea);
    }
    copy = function (text) {
        createTextArea(text);
        selectText();
        copyToClipboard();
    };
    return {
        copy: copy
    };
})(window, document, navigator)
// 2. 使用
DeviceDetail.copy = function(type) {
    var url = type === 'flvUrl' ? $(".flv-url").text() : (type === 'rtmpUrl' ? $(".rtmp-url").text(): '')
    Clipboard.copy(url);
}

<div><label>FLV 地址：</label><span class="flv-url"></span>&nbsp;<span class="flv-copy hidden" onclick="DeviceDetail.copy('flvUrl')">复制</span></div>