將文字複製到剪貼簿是現(xiàn)代 Web 應(yīng)用程式中的常見要求。雖然有許多普通的JavaScript 解決方案，但今天我們將使用Clipboard.js （一個輕量級庫）和Hint.css （一個簡單的工具提示庫）來建立一個優(yōu)雅的複製到-剪貼簿功能。

第 1 步：HTML 結(jié)構(gòu)

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 免費 資源 供開發(fā)者使用！ ???? _{（每日更新）}

1400 個免費 HTML 範本

372 篇免費新聞文章

72 個免費 AI 提示

333 個免費程式碼庫

52 個適用於 Node、Nuxt、Vue 等的免費程式碼片段和樣板！

25 個免費開源圖示庫

造訪 dailysandbox.pro 免費存取資源寶庫！

守則解釋

• 這會將 data-clipboard-text 屬性動態(tài)設(shè)定為所需的 URL。
• text：定義一個回呼函數(shù)，傳回被點選元素的 data-clipboard-text 屬性的值。
• 剪貼簿操作成功時將工具提示更新為「已複製」。
• 3 秒後將工具提示文字重設(shè)為「將連結(jié)複製到剪貼簿」。

處理成功事件 :

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'),
});

設(shè)定剪貼簿文字 :

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

這種方法的優(yōu)點

1. 無 jQuery 依賴：透過使用純 JavaScript，解決方案是輕量級的並且與現(xiàn)代 Web 標準相容。
2. Hint.css 整合：提供乾淨、視覺上吸引人的工具提示，無需額外的 JavaScript。
3. Clipboard.js Simplicity：高效處理剪貼簿交互，無需自訂邏輯。

結(jié)論

只需幾行純 JavaScript 以及 Clipboard.js 和 Hint.css 的強大功能，您就實現(xiàn)了乾淨、用戶友好的複製到剪貼簿功能。這種方法避免了不必要的依賴，同時保持了功能性和優(yōu)雅性。

現(xiàn)在，就來嘗試吧！您的用戶將欣賞此功能的簡單性和回應(yīng)能力。 ？

有關(guān) Web 開發(fā)的更多技巧，請查看 DailySandbox 並註冊我們的免費時事通訊以保持領(lǐng)先地位！

以上是如何將文字複製到剪貼簿的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！