一个轻量级的 JavaScript 复制到剪贴板库clipboard.js

📌 clipboard.js 介绍

clipboard.js 是一个轻量级的 JavaScript 复制到剪贴板库，可以让用户一键复制文本，而无需依赖 Flash 或复杂的 API 兼容代码。

✅ 1. 安装 clipboard.js

方法 1：CDN 引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>

方法 2：使用 npm

npm install clipboard

然后在 JS 代码中导入：

import ClipboardJS from 'clipboard';

✅ 2. 使用示例

📌 方式 1：点击按钮复制内容

<input type="text" value="复制的文本" id="text-to-copy">
<button class="btn" data-clipboard-target="#text-to-copy">复制</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<script>
    new ClipboardJS('.btn');
</script>

✅ 工作原理

• data-clipboard-target="#text-to-copy" 指定要复制的目标

• new ClipboardJS('.btn') 让所有 .btn 元素都支持复制

📌 方式 2：直接复制文本（不需要 input）

如果你想直接复制一段字符串，而不是 input 里的值：

<button class="copy-btn">复制文本</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<script>
    var clipboard = new ClipboardJS('.copy-btn', {
        text: function() {
            return "Hello, 这是被复制的文本！";
        }
    });

    clipboard.on('success', function(e) {
        alert('复制成功！');
        e.clearSelection();
    });

    clipboard.on('error', function(e) {
        alert('复制失败，请手动复制！');
    });
</script>

✅ 适用于：

• 动态复制字符串

• 不依赖 input 或 textarea

📌 方式 3：复制并显示提示

<input type="text" value="https://example.com" id="link">
<button class="btn" data-clipboard-target="#link">复制链接</button>
<span id="copy-status"></span>

<script>
    var clipboard = new ClipboardJS('.btn');

    clipboard.on('success', function(e) {
        document.getElementById('copy-status').textContent = "复制成功！";
        setTimeout(() => { document.getElementById('copy-status').textContent = ""; }, 2000);
    });

    clipboard.on('error', function(e) {
        document.getElementById('copy-status').textContent = "复制失败！";
    });
</script>

✅ 适用于：

• 用户体验优化（显示复制状态）

• 自动隐藏提示

✅ 3. 适用场景

✅ 4. 兼容性

• clipboard.js 兼容所有现代浏览器

• 但 不支持 IE9 及以下

🚀 如果你的应用需要快速实现复制功能，clipboard.js 是最佳选择！
你是要在 PC 端还是移动端使用？是否需要优化提示 UI？😊

最后

以上就是每日一库最近收集整理的关于一个轻量级的 JavaScript 复制到剪贴板库clipboard.js的全部内容，更多相关一个轻量级的内容请搜索靠谱客的其他文章。