如何在列表项旁添加复制到剪贴板按钮？（HTML/JavaScript）

你可以通过以下步骤给每个结果项添加复制按钮：

1. 修改HTML结构 #

在循环生成的<li>元素里添加复制按钮，把要复制的链接通过data-url属性存储起来，方便后续JS调用：

<form action="/" method="post">
    <input name="input" placeholder="Shorten a link here..."/>
    <button class="shorten-btn" type="submit">Shorten It!</button>
</form>
<ul class="results">
    <% for (let i=0; i<results.length; i++) { %>
        <li>
            <span class="result-url"><%= results[i] %></span>
            <button class="copy-btn" data-url="<%= results[i] %>">复制</button>
        </li>
    <% } %>
 </ul>

2. 添加JavaScript复制逻辑 #

使用浏览器原生的Clipboard.writeText() API实现复制功能，同时添加复制成功的反馈提示：

document.addEventListener('DOMContentLoaded', function() {
    const copyButtons = document.querySelectorAll('.copy-btn');
    
    copyButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            const url = this.getAttribute('data-url');
            
            navigator.clipboard.writeText(url).then(() => {
                // 临时修改按钮文字提示成功
                const originalText = this.textContent;
                this.textContent = '已复制';
                
                // 2秒后恢复原文字
                setTimeout(() => {
                    this.textContent = originalText;
                }, 2000);
            }).catch(err => {
                console.error('复制失败:', err);
                alert('复制失败，请手动复制链接');
            });
        });
    });
});

功能说明 #

• data-url属性：直接存储当前要复制的链接，比从DOM文本中提取更可靠，逻辑更清晰。
• Clipboard.writeText()：现代浏览器原生支持的剪贴板API，相比旧的document.execCommand('copy')更安全、兼容性更好。
• 反馈提示：复制成功后修改按钮文字并自动恢复，让用户直观知道操作结果。

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