Clipboard.js

7天前发布 13 0 0

一键复制到剪贴板

收录时间:
2026-10-06
Clipboard.jsClipboard.js
clipboard.js 是一个非常轻量、纯 JavaScript 的现代网页剪贴板复制库,它最大的特点是不依赖 Flash。
核心优势
  • 轻量小巧:压缩后仅约 2KB 左右,对网页加载性能几乎没有影响。

  • 不依赖第三方库:不需要 jQuery 或其他庞大的框架,纯原生 JS 编写。

  • 使用极其简单:主要通过 HTML5 的 data-* 属性来声明式绑定复制目标,几乎不需要写复杂的 JS 代码。

  • 现代浏览器兼容性好:基于 HTML5 的 Selection 和 execCommand API(以及现代的 Clipboard API 降级处理),完美支持 Chrome、Firefox、Safari、Edge 等主流浏览器。

简单使用示例

只需在 HTML 元素上添加 data-clipboard-target 属性指向要复制的输入框即可:

html
<!-- 1. 目标输入框 -->
<input id="foo" value="这是要复制的文字">

<!-- 2. 触发复制的按钮 -->
<button class="btn" data-clipboard-target="#foo">复制到剪贴板</button>

<!-- 3. 初始化 JS -->
<script>
  new ClipboardJS('.btn');
</script>
Use code with caution.
适用场景
  • 网页中的“一键复制”功能(如复制优惠券码、API 密钥、分享链接、代码块等)。

  • 需要快速集成且不想增加项目体积的场景。

数据统计

相关导航

暂无评论

none
暂无评论...