JavaScript复制文本到剪贴板

JavaScript复制文本到剪贴板

native方法

// 复制文本到剪贴板
window.copy("123456789");  // 字符串
window.copy([111,222,333]);  // 数组
window.copy({aaa:"aaa",bbb:"bbb"});  // 对象

借助textarea元素

class TzUtil {
    // 复制文本到剪贴板
    static copy(text) {
        if (typeof text == 'object') {
            text = JSON.stringify(text);
        }
        let element = document.createElement('textarea');
        element.value = text;
        element.style.position = 'fixed';
        element.style.top = '0px';
        element.style.left = '-9999px';
        element.style.width = '100px';
        element.style.height = '100px';
        element.style.zIndex = '-9999';
        document.body.appendChild(element);
        element.select();
        let flag = false;
        if (document.execCommand('copy')) {
            flag = true;
            document.execCommand('copy');
        }
        document.body.removeChild(element);
        if (!flag) {
            console.error('copy失败\n' + text);
        }
        return flag;
    }
}

// 调用方式
TzUtil.copy(xxxxx);

ClipboardJS库

// https://www.bootcdn.cn/clipboard.js/
// https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.min.js

// 实例化 new ClipboardJS
// 对元素选择器为.tzextension-copy的元素开启ClipboardJS功能
try {
    console.log('[tzExtension-util-startClipboardJS]', 'startClipboardJS');
    let tzClipboard = new ClipboardJS('.tzextension-copy');
    tzClipboard.on('success', function (e) {
        console.log('[tzExtension-util-startClipboardJS]', 'copy成功\n', e.text);
    });
    tzClipboard.on('error', function (e) {
        console.error('[tzExtension-util-startClipboardJS]', 'copy失败\n', e);
    });
} catch (error) {
    console.error('[tzExtension-util-startClipboardJS]', "捕获到异常\n", error);
}

// 给元素后面添加点击复制的按钮.tzextension-copy
// ele是jQuery元素，text是要复制的文本(不传参时默认取ele元素的text内容)
// 复制内容为属性data-clipboard-text中的文本
window.tzExtension.util.addButtonForCopy = function (ele, text) {
    try {
        console.log('[tzExtension-util-addButtonForCopy]', '\n', ele, '\n', text);
        if (!ele || ele.length < 1) { return }
        if (!text) { text = ele.text() }
        ele.after($('<button>', {
            'class': 'tzextension-copy',
            'title': text.trim(),
            'data-clipboard-text': text.trim()
        }).text('tzExtension复制'));
    } catch (error) {
        console.error('[tzExtension-util-addButtonForCopy]', "捕获到异常\n", error);
    }
};

示例：点击元素复制其文本

(function () {
    console.clear();
    $(document.body).on("click", `div.xxxxx`, function () {
        let text = $(this).text().trim();  // 元素文本
        let res = TzUtil.copy(text);  // 需要导入TzUtil.copy函数
        if (res) {
            console.log(`复制成功：\n${text}`);
        } else {
            console.error(`复制失败：\n${text}`);
        }
    });
})();

作者博客首页：https://blog.csdn.net/qq_43111676?type=blog