如何实现多个不同按钮分别复制对应textarea内容到剪贴板

方案1：兼容原有逻辑改造（适配旧版浏览器） #

你原来的代码逻辑是写死了目标文本框选择器，只需要把复制逻辑抽成可传入目标选择器的通用函数，再分别绑定两个按钮的点击事件即可，原有功能不受影响：

// 通用复制函数，参数为要复制的目标文本框选择器
function copyToClipboard(targetSelector) {
    let fake = document.createElement("textarea");
    fake.value = document.querySelector(targetSelector).value;
    document.body.appendChild(fake);
    fake.select();
    document.execCommand("copy");
    document.body.removeChild(fake);
    let notice = document.createElement("span");
    notice.className = "notice visible";
    notice.innerHTML = "Text copied to the clipboard!";
    document.body.appendChild(notice);
    setTimeout(() => {
        document.body.removeChild(notice);
    }, 3000);
}

// 绑定原有按钮功能
document.querySelector(".UniCopBtn").addEventListener("click", () => copyToClipboard("#transliterateTextarea"));
// 绑定新增的abcd按钮功能
document.querySelector(".abcd").addEventListener("click", () => copyToClipboard("#xyz"));

方案2：现代浏览器标准实现（更推荐） #

document.execCommand已经被官方弃用，更推荐使用原生Clipboard API实现，无需创建临时DOM节点，代码更简洁稳定：

// 通用异步复制函数
async function copyToClipboard(targetSelector) {
    try {
        const copyText = document.querySelector(targetSelector).value;
        await navigator.clipboard.writeText(copyText);
        // 复制成功提示
        let notice = document.createElement("span");
        notice.className = "notice visible";
        notice.innerHTML = "Text copied to the clipboard!";
        document.body.appendChild(notice);
        setTimeout(() => {
            document.body.removeChild(notice);
        }, 3000);
    } catch (e) {
        console.error("复制操作失败：", e);
    }
}

// 绑定两个按钮的点击事件
document.querySelector(".UniCopBtn").addEventListener("click", () => copyToClipboard("#transliterateTextarea"));
document.querySelector(".abcd").addEventListener("click", () => copyToClipboard("#xyz"));

该方案兼容所有主流现代浏览器（Chrome 66+、Firefox 63+、Safari 13.1+）。

内容的提问来源于stack exchange，提问作者SSKhekhaliya