將文字複製到剪貼簿是現代 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中文網其他相關文章！
