md/js/copy.js

/**
 * @description 复制文字内容到剪切板，更多内容参见：https://www.zhangxinxu.com/wordpress/?p=10150
 * @author zhangxinxu(.com)
 * @created 2021-10-22
 */

 var copyText = function (button, content, success) {
    if (!button) {
        return;
    }

    if (typeof content == 'function') {
        success = content;
        content = null;
    }

    success = success || function () {};

    // 是否降级使用
    var isFallback = !navigator.clipboard;

    if (typeof button == 'string' && !content) {
        if (content === false) {
            isFallback = true;
        }
        content = button;
        button = null;
    }

    var eleTextarea = document.querySelector('#tempTextarea');
    if (!eleTextarea && isFallback) {
        eleTextarea = document.createElement('textarea');
        eleTextarea.style.width = 0;
        eleTextarea.style.position = 'fixed';
        eleTextarea.style.left = '-999px';
        eleTextarea.style.top = '10px';
        eleTextarea.setAttribute('readonly', 'readonly');
        document.body.appendChild(eleTextarea);
    }

    var funCopy = function (text, callback) {
        callback = callback || function () {};

        if (!isFallback) {
            navigator.clipboard.writeText(text).then(function () {
                callback();
                // 成功回调
                success(text);
            }, function() {
                // 禁止写入剪切板后使用兜底方法
                copyText(text, false);
                callback();
                // 成功回调
                success(text);
            });

            return;
        }

        eleTextarea.value = text;
        eleTextarea.select();
        document.execCommand('copy', true);

        callback();
        // 成功回调
        success(text);
    };

    if (!button) {
        funCopy(content);
        return;
    }

    // 事件绑定
    button.addEventListener('click', function (event) {
        var strCopy = content;
        if (content && content.tagName) {
            strCopy = content.textContent || content.value;
        }
        // 复制的文字内容
        if (!strCopy) {
            return;
        }        

        funCopy(strCopy, function () {
            // 复制成功提示
            var eleTips = document.createElement('span');
            eleTips.className = 'text-popup';
            eleTips.innerHTML = '复制成功';
            document.body.appendChild(eleTips);
            // 事件
            eleTips.addEventListener('animationend', function() {
                eleTips.parentNode.removeChild(eleTips);
            });
            // For IE9
            if (!history.pushState) {
                setTimeout(function () {
                    eleTips.parentNode.removeChild(eleTips);
                }, 1000);
            }
            eleTips.style.left = (event.pageX - eleTips.clientWidth / 2) + 'px';
            eleTips.style.top = (event.pageY - eleTips.clientHeight) + 'px';
        });
    });

    var strStyle = '.text-popup { animation: textPopup 1s both; -ms-transform: translateY(-20px); color: #01cf97; user-select: none; white-space: nowrap; position: absolute; z-index: 99; }@keyframes textPopup {0%, 100% { opacity: 0; } 5% { opacity: 1; } 100% { transform: translateY(-50px); }}'

    var eleStyle = document.querySelector('#popupStyle');
    if (!eleStyle) {
        eleStyle = document.createElement('style');
        eleStyle.id = 'popupStyle';
        eleStyle.innerHTML = strStyle;
        document.head.appendChild(eleStyle);
    }
};

/**
 * 输入文字到剪切板
 * @param {string} content 
 * @returns 
 */
function copyText (content){
    return new Promise((resolve,reject)=>{
        // 判断是否支持 clipboard api 复制
        try {
            if (navigator.clipboard) {
                navigator.clipboard.writeText(content).then(resolve).catch(reject);
            } else {
                let textarea = document.createElement('textarea');
                // 隐藏此输入框
                textarea.style.position = 'fixed';
                textarea.style.opacity = '0';
                textarea.style.top = '20px';
                document.body.appendChild(textarea);
                // 赋值
                textarea.value = content;
                // 选中
                textarea.select();
                // 复制
                document.execCommand('copy', true);
                // 移除输入框
                document.body.removeChild(textarea);
            }
            resolve('ok');
        } catch (error) {
            reject(error);
        }
    })
}