如何将文本复制到剪贴板

将文本复制到剪贴板是现代 Web 应用程序中的常见要求。虽然存在许多普通的 JavaScript 解决方案，但今天我们将使用 Clipboard.js （一个轻量级库）和 Hint.css （一个简单的工具提示库）来创建一个优雅的复制到-剪贴板功能。

---

第 1 步：HTML 结构

HTML 保持不变。它包含一个使用 Hint.css 样式的链接，用于在将鼠标悬停在复制图标上时显示工具提示。

<a href="#">



<ul>
<li>
<strong>class="hint hint-bottom"</strong> : Adds a bottom-aligned tooltip using Hint.css.</li>
<li>
<strong>data-hint="Copy link to clipboard"</strong> : The tooltip text.</li>
</ul>


<hr>

<h3>
  
  
  Step 2: JavaScript
</h3>

<p>Here’s the updated code in plain JavaScript:<br>
</p>

<pre class="brush:php;toolbar:false">// Select the clipboard control
const control = document.querySelector('.app-clipboard-link');

// Set the clipboard text
control.setAttribute('data-clipboard-text', 'https://google.com');

// Initialize Clipboard.js
const clipboard = new ClipboardJS(control, {
    text: (trigger) => trigger.getAttribute('data-clipboard-text'),
});

// Handle the success event
clipboard.on('success', (event) => {
    // Update the tooltip to show "Copied"
    control.setAttribute('data-hint', 'Copied');

    // Reset the tooltip after 3 seconds
    setTimeout(() => {
        control.setAttribute('data-hint', 'Copy link to clipboard');
    }, 3000);
});

---

2254 免费 资源 供开发者使用！ ❤️?? _{（每日更新）}

1400 个免费 HTML 模板

372 篇免费新闻文章

72 个免费 AI 提示

333 个免费代码库

52 个适用于 Node、Nuxt、Vue 等的免费代码片段和样板！

25 个免费开源图标库

访问 dailysandbox.pro 免费访问资源宝库！

---

守则解释

• 这会将 data-clipboard-text 属性动态设置为所需的 URL。
• text：定义一个回调函数，返回被单击元素的 data-clipboard-text 属性的值。
• 剪贴板操作成功时将工具提示更新为“已复制”。
• 3 秒后将工具提示文本重置回“将链接复制到剪贴板”。

处理成功事件 :

clipboard.on('success', (event) => {
    control.setAttribute('data-hint', 'Copied');
    setTimeout(() => {
        control.setAttribute('data-hint', 'Copy link to clipboard');
    }, 3000);
});

初始化 Clipboard.js :

const clipboard = new ClipboardJS(control, {
    text: (trigger) => trigger.getAttribute('data-clipboard-text'),
});

设置剪贴板文本 :

control.setAttribute('data-clipboard-text', 'https://google.com');

---

这种方法的优点

1. 无 jQuery 依赖：通过使用纯 JavaScript，该解决方案是轻量级的并且与现代 Web 标准兼容。
2. Hint.css 集成：提供干净、视觉上吸引人的工具提示，无需额外的 JavaScript。
3. Clipboard.js Simplicity：高效处理剪贴板交互，无需自定义逻辑。

---

结论

只需几行纯 JavaScript 以及 Clipboard.js 和 Hint.css 的强大功能，您就实现了干净、用户友好的复制到剪贴板功能。这种方法避免了不必要的依赖，同时保持了功能性和优雅性。

现在，就来尝试一下吧！您的用户将欣赏此功能的简单性和响应能力。 ？

有关 Web 开发的更多技巧，请查看 DailySandbox 并注册我们的免费时事通讯以保持领先地位！

以上是如何将文本复制到剪贴板的详细内容。更多信息请关注PHP中文网其他相关文章！