JS点击复制a标签邮箱到剪贴板时误复制完整JS函数如何解决

问题根因 #

• 核心问题是重复ID+固定选择器：你循环渲染列表时给所有邮箱a标签都设置了相同的固定id a1，点击任意行的复制图标都只会查询页面第一个id为a1的元素，当匹配不到对应元素或者目标元素文本为空时，就会误复制页面内其他已被选中的内容（你遇到的就是误选中了script标签内的JS代码）。
• 次要问题：原代码没有做输入框的选中范围兼容，部分浏览器可能无法正确选中临时输入框内的文本，导致复制内容异常。

修复方案 #

第一步：修改HTML结构 #

移除固定ID，点击时传入当前点击的图标元素本身：

<td class="col-md-3 contactTable">
    <a href="mailto:@Model.UsersEmail[item.ID]">@Model.UsersEmail[item.ID]</a>
    <i class="fa fa-copy" onclick="copyToC(this)" style="font-size:17px;"></i>
</td>

第二步：修改JS逻辑 #

通过相对节点查找获取对应邮箱文本，避免固定ID的匹配问题：

function copyToC(clickElement) {
    // 查找当前点击图标同层级的前置a标签，获取邮箱文本
    const emailText = $(clickElement).prev('a').text().trim();
    const $tempInput = $("<input>");
    $("body").append($tempInput);
    $tempInput.val(emailText).select();
    // 兼容移动端/部分浏览器的选中逻辑
    $tempInput[0].setSelectionRange(0, emailText.length);
    document.execCommand("copy");
    $tempInput.remove();
    // 可自行添加复制成功提示逻辑，比如修改图标样式、弹出toast等
}

可选优化：替换废弃API #

document.execCommand 已被官方废弃，可改用现代标准的 Clipboard API 实现，兼容性覆盖所有主流浏览器：

async function copyToC(clickElement) {
    const emailText = $(clickElement).prev('a').text().trim();
    try {
        // 优先用现代Clipboard API
        await navigator.clipboard.writeText(emailText);
        // 复制成功逻辑
    } catch (err) {
        // 旧浏览器降级兼容
        const $tempInput = $("<input>");
        $("body").append($tempInput);
        $tempInput.val(emailText).select();
        $tempInput[0].setSelectionRange(0, emailText.length);
        document.execCommand("copy");
        $tempInput.remove();
    }
}

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