将文本复制到剪贴板是现代 Web 应用程序中的常见要求。虽然存在许多普通的 JavaScript 解决方案，但今天我们将使用 Clipboard.js （一个轻量级库）和 Hint.css （一个简单的工具提示库）来创建一个优雅的复制到-剪贴板功能。
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 免费访问资源宝库！
处理成功事件 :
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');
只需几行纯 JavaScript 以及 Clipboard.js 和 Hint.css 的强大功能，您就实现了干净、用户友好的复制到剪贴板功能。这种方法避免了不必要的依赖，同时保持了功能性和优雅性。
现在，就来尝试一下吧！您的用户将欣赏此功能的简单性和响应能力。 ？
有关 Web 开发的更多技巧，请查看 DailySandbox 并注册我们的免费时事通讯以保持领先地位！
以上是如何将文本复制到剪贴板的详细内容。更多信息请关注PHP中文网其他相关文章！
