How to Create HTML5 Copy Button through clipboard.js

根据 clipboard.js 的官方文档实现你想要的“点击后显示对号过一会儿恢复”的反馈效果完全可以通过监听其提供的success和error事件来完成 核心实现思路官方文档明确指出你可以监听success和error自定义事件来执行自定义逻辑这正是实现按钮文字/图标反馈的绝佳时机。 代码实现步骤0. Copy按钮的HTML实现button classinput-group-text btn btn-outline-secondary btn-copy >!-- 引入 clipboard.js (如果还未引入) -- script srchttps://cdn.jsdelivr.net/npm/clipboard2.0.11/dist/clipboard.min.js/script script // 监听 DOM 内容加载完成事件确保页面元素已就绪再执行脚本 document.addEventListener(DOMContentLoaded, function() { // 初始化传入触发复制按钮的选择器 var clipboard new ClipboardJS(.btn-copy); // ... 事件监听代码将放在这里 }); /script2. 监听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); }); 代码要点总结核心交互通过监听success和error事件在复制操作后立即给用户清晰的视觉反馈。状态管理通过保存和恢复textContent和className实现了按钮状态的“复原”效果。样式切换利用 Bootstrap 的工具类btn-success、btn-danger快速改变按钮颜色无需编写额外 CSS。健壮性在使用querySelector时进行了判空处理如textSpan ? ... : ...避免因元素缺失导致脚本报错。用户体验2-2.5 秒的延迟时间既让用户看清反馈又不至于等待过久。如果你希望调整反馈时长或图标修改setTimeout的延迟时间和icon.className的赋值即可。