clipboard.js

当需要用户点击按钮一键复制邀请码、链接或代码片段时，clipboard.js 以 3KB gzip 的轻量提供无 Flash、无框架依赖的现代方案。

核心设计理念

作者 zenorocha 认为复制到剪板不应依赖 Flash 或臃肿框架，因此该库仅基于 Selection 与 execCommand API，gzip 后仅 3KB，且通过事件委托（单个监听器替代数百个）优化内存。

• 零依赖: 无需 jQuery 或其他框架
• 声明式复兴: 利用 HTML5 data-* 属性配置复制/剪切行为
• 优雅降级: 旧浏览器中自动选中文本，提示用户按 Ctrl+C

安装与快速上手

可通过 npm 安装（npm install clipboard --save）或直接引用 dist/clipboard.min.js 脚本。实例化时传递 DOM 选择器、元素或列表即可。

• CDN 示例: <script src="https://clipboard.nodejs.cn/clipboard.min.js"></script>
• 基础初始化: new ClipboardJS('.btn') 为所有 .btn 元素绑定复制
• 兼容性检测: 调用 ClipboardJS.isSupported() 判断是否支持，可据此隐藏复制按钮

三种复制模式与事件监听

通过 data-clipboard-target 复制其他元素内容，data-clipboard-action="cut" 剪切（仅限 input/textarea），data-clipboard-text 直接复制按钮属性文本。提供 success 和 error 自定义事件供回调。

• 复制元素: data-clipboard-target="#foo" 指向目标元素
• 剪切操作: data-clipboard-action="cut" 配合 target 使用
• 属性复制: data-clipboard-text="要复制的文本" 无需额外元素
• 事件响应: clipboard.on('success', function(e){ e.clearSelection(); })
• 工具提示: 库本身不提供 CSS/工具提示，演示站使用 GitHub Primer 构建

高级用法与浏览器支持

提供命令式 API，可在初始化时通过 target/text 函数动态返回 Node 或字符串；支持在 Bootstrap Modals 中设置 container 属性；提供 destroy() 方法清理事件。

• 动态 target: target: function(trigger) { return trigger.nextElementSibling; }
• 动态 text: text: function(trigger) { return trigger.getAttribute('aria-label'); }
• 模态框适配: container: document.getElementById('modal')
• 生命周期管理: clipboard.destroy() 释放资源
• 支持浏览器: Chrome 42+, Edge 12+, Firefox 41+, IE 9+, Opera 29+, Safari 10+

常见问题

Q1：clipboard.js 能否在 IE9 上正常工作？

A1：支持 IE9+，但需注意 execCommand API 在旧浏览器中可能受限；库会优雅降级，在 error 事件中提示用户手动按 Ctrl+C 复制。

Q2：如何在不修改 HTML 的情况下动态设置要复制的内容？

A2：使用命令式 API，在初始化时传入 text 函数：new ClipboardJS('.btn', { text: function(trigger) { return trigger.getAttribute('aria-label'); } }); 该函数返回的字符串即为复制内容。

Q3：clipboard.js 是否支持剪切（cut）操作？

A3：支持，通过 data-clipboard-action="cut" 属性指定，但仅适用于 <input> 或 <textarea> 元素，不可用于普通 div 等。

更多同类工具与网站,可在前端库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。