How to Create HTML5 Copy Button through clipboard.js

captainOO7

217人浏览 · 2026-07-01 17:26:59

captainOO7 · 2026-07-01 17:26:59 发布

根据 clipboard.js 的官方文档，实现你想要的“点击后显示对号，过一会儿恢复”的反馈效果，完全可以通过监听其提供的 success 和 error 事件来完成

🎯 核心实现思路

官方文档明确指出，你可以监听 success 和 error 自定义事件来执行自定义逻辑，这正是实现按钮文字/图标反馈的绝佳时机。

📝 代码实现步骤

0. Copy按钮的HTML实现

<button class="input-group-text btn btn-outline-secondary btn-copy"
        data-clipboard-target="#zip-file-link">
    <i class="far fa-copy"></i>
    <span class="copy-text">Copy</span>
</button>

1. 初始化 Clipboard.js

首先，确保你已正确引入 clipboard.js 库并实例化它。

<!-- 引入 clipboard.js (如果还未引入) -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>

<script>
  // 监听 DOM 内容加载完成事件，确保页面元素已就绪再执行脚本
  document.addEventListener('DOMContentLoaded', function() {
    // 初始化，传入触发复制按钮的选择器
    var clipboard = new ClipboardJS('.btn-copy'); 
    
    // ... 事件监听代码将放在这里
  });
</script>

2. 监听 `success` 事件

当复制成功时，修改按钮的 HTML 和样式，显示“Copied!”和图标。

    // ============================================
    // 2. 监听 'success' 事件（复制成功时触发）
    // ============================================
    clipboard.on('success', function (e) {
        // e.trigger 指向被点击的按钮元素（即触发复制的 DOM 节点）
        var trigger = e.trigger;
        
        // 从按钮内部查找包含复制文本的 span 元素
        var textSpan = trigger.querySelector('.copy-text');
        // 从按钮内部查找图标元素（假设是 <i> 标签）
        var icon = trigger.querySelector('i');

        // --- 保存当前状态，以便后续恢复 ---
        // 保存按钮上显示的原始文字，如果找不到 '.copy-text'，则默认为 'Copy'
        var originalText = textSpan ? textSpan.textContent : 'Copy';
        // 保存图标的原始类名（用于恢复原有样式）
        var originalIconClass = icon ? icon.className : '';

        // --- 切换到"复制成功"状态 ---
        // 更新文字为 'Copied!'
        if (textSpan) textSpan.textContent = 'Copied!';
        // 更新图标为 Font Awesome 的对号图标 'fa-check'，并保留间距类 'me-1'
        if (icon) {
            icon.className = 'fas fa-check me-1';
        }
        // 修改按钮样式：移除原有的边框样式，添加 Bootstrap 的成功（绿色）和白色文字样式
        trigger.classList.add('btn-success', 'text-white');
        trigger.classList.remove('btn-outline-secondary');

        // --- 2.5 秒后恢复按钮原始状态 ---
        setTimeout(function () {
            // 恢复文字
            if (textSpan) textSpan.textContent = originalText;
            // 恢复图标类名
            if (icon) icon.className = originalIconClass;
            // 恢复按钮样式：移除成功样式，重新添加边框样式
            trigger.classList.remove('btn-success', 'text-white');
            trigger.classList.add('btn-outline-secondary');
        }, 2500); // 延迟 2500 毫秒（2.5 秒）执行

        // 清除选中的文本（clipboard.js 官方推荐做法，避免文本残留选中状态）
        e.clearSelection();
    });

3. 监听 `error` 事件

与监听 success 事件类似，当复制失败时，修改按钮的 HTML 和样式，显示“Failed!”和图标。

    // ============================================
    // 3. 监听 'error' 事件（复制失败时触发）
    // ============================================
    clipboard.on('error', function (e) {
        var trigger = e.trigger;
        var textSpan = trigger.querySelector('.copy-text');
        var icon = trigger.querySelector('i');

        // 保存原始文字和图标类名（逻辑与 success 事件相同）
        var originalText = textSpan ? textSpan.textContent : 'Copy';
        var originalIconClass = icon ? icon.className : '';

        // --- 切换到"复制失败"状态 ---
        // 更新文字为 'Failed!'
        if (textSpan) textSpan.textContent = 'Failed!';
        // 更新图标为 Material Design Icons 的叉号 'mdi-close'（你项目中使用的图标库）
        if (icon) {
            icon.className = 'mdi mdi-close';
        }
        // 修改按钮样式：移除边框样式，添加 Bootstrap 的危险（红色）和白色文字样式
        trigger.classList.add('btn-danger', 'text-white');
        trigger.classList.remove('btn-outline-secondary');

        // --- 2 秒后恢复按钮原始状态 ---
        setTimeout(function () {
            // 恢复文字和图标
            textSpan.textContent = originalText;
            if (icon) icon.className = originalIconClass;
            // 恢复按钮样式
            trigger.classList.remove('btn-danger', 'text-white');
            trigger.classList.add('btn-outline-secondary');
        }, 2000); // 延迟 2000 毫秒（2 秒）执行，比成功状态稍短

        // 在控制台输出错误信息，便于调试
        console.error('Copy failed:', e);
    });