如何为Django动态按钮实现非HTTPS环境下的剪贴板复制功能

由于navigator.clipboard仅支持HTTPS环境（本地localhost除外），你可以通过**创建临时文本框+document.execCommand('copy')**的传统方法实现复制功能，具体实现如下：

核心思路 #

1. 将从按钮属性中获取的信息拼接成你需要的格式（比如按行分隔）
2. 创建一个隐藏的<textarea>临时元素，把拼接好的内容赋值给它
3. 将临时文本框插入页面，选中内容后执行复制命令
4. 复制完成后移除临时文本框，避免干扰页面

修改后的完整代码 #

替换你原有的JavaScript部分即可：

<script>
    const copyBtns = [...document.getElementsByClassName("copy-btn")]
    copyBtns.forEach(btn => btn.addEventListener('click', () => {
        const companyName = btn.getAttribute("company-name")
        const userName = btn.getAttribute("user-name")
        const fullName = btn.getAttribute("full-name")
        const email = btn.getAttribute("email")
        const expireDate = btn.getAttribute("expire-date")

        // 拼接复制内容，可根据需求调整格式
        const copyContent = `公司名称：${companyName}
用户名：${userName}
全名：${fullName}
邮箱：${email}
过期日期：${expireDate}`;

        // 创建临时textarea并设置隐藏样式
        const tempTextarea = document.createElement('textarea');
        tempTextarea.style.position = 'absolute';
        tempTextarea.style.left = '-9999px';
        tempTextarea.style.top = '-9999px';
        tempTextarea.value = copyContent;

        // 插入DOM并选中内容
        document.body.appendChild(tempTextarea);
        tempTextarea.select();

        // 执行复制并处理状态
        try {
            document.execCommand('copy');
            btn.textContent = "Copied";
        } catch (err) {
            btn.textContent = "Copy failed";
        }

        // 移除临时元素
        document.body.removeChild(tempTextarea);

        // 恢复按钮文字
        setTimeout(() => {
            btn.textContent = "Copy information";
        }, 1350);
    }));
</script>

补充说明 #

• document.execCommand('copy')是兼容性极强的旧API，完全支持非HTTPS环境
• 临时文本框通过绝对定位移出视口，不会对页面布局产生任何影响
• 加入try-catch块可捕获复制失败的情况（比如浏览器禁用复制权限）

内容的提问来源于stack exchange，提问作者Angel Gabriel Chable Concepcio