將文本復(fù)制到剪貼板是現(xiàn)代 Web 應(yīng)用程序中的常見(jiàn)要求。雖然存在許多普通的 JavaScript 解決方案，但今天我們將使用 Clipboard.js （一個(gè)輕量級(jí)庫(kù)）和 Hint.css （一個(gè)簡(jiǎn)單的工具提示庫(kù)）來(lái)創(chuàng)建一個(gè)優(yōu)雅的復(fù)制到-剪貼板功能。

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

HTML 保持不變。它包含一個(gè)使用 Hint.css 樣式的鏈接，用于在將鼠標(biāo)懸停在復(fù)制圖標(biāo)上時(shí)顯示工具提示。

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

1400 個(gè)免費(fèi) HTML 模板

372 篇免費(fèi)新聞文章

72 個(gè)免費(fèi) AI 提示

333 個(gè)免費(fèi)代碼庫(kù)

52 個(gè)適用于 Node、Nuxt、Vue 等的免費(fèi)代碼片段和樣板！

25 個(gè)免費(fèi)開(kāi)源圖標(biāo)庫(kù)

訪問(wèn) dailysandbox.pro 免費(fèi)訪問(wèn)資源寶庫(kù)！

守則解釋

• 這會(huì)將 data-clipboard-text 屬性動(dòng)態(tài)設(shè)置為所需的 URL。
• text：定義一個(gè)回調(diào)函數(shù)，返回被單擊元素的 data-clipboard-text 屬性的值。
• 剪貼板操作成功時(shí)將工具提示更新為“已復(fù)制”。
• 3 秒后將工具提示文本重置回“將鏈接復(fù)制到剪貼板”。

處理成功事件 :

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)點(diǎn)

1. 無(wú) jQuery 依賴(lài)：通過(guò)使用純 JavaScript，該解決方案是輕量級(jí)的并且與現(xiàn)代 Web 標(biāo)準(zhǔn)兼容。
2. Hint.css 集成：提供干凈、視覺(jué)上吸引人的工具提示，無(wú)需額外的 JavaScript。
3. Clipboard.js Simplicity：高效處理剪貼板交互，無(wú)需自定義邏輯。

結(jié)論

只需幾行純 JavaScript 以及 Clipboard.js 和 Hint.css 的強(qiáng)大功能，您就實(shí)現(xiàn)了干凈、用戶(hù)友好的復(fù)制到剪貼板功能。這種方法避免了不必要的依賴(lài)，同時(shí)保持了功能性和優(yōu)雅性。

現(xiàn)在，就來(lái)嘗試一下吧！您的用戶(hù)將欣賞此功能的簡(jiǎn)單性和響應(yīng)能力。 ？

有關(guān) Web 開(kāi)發(fā)的更多技巧，請(qǐng)查看 DailySandbox 并注冊(cè)我們的免費(fèi)時(shí)事通訊以保持領(lǐng)先地位！

以上是如何將文本復(fù)制到剪貼板的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！