テキストをクリップボードにコピーすることは、最新の Web アプリケーションでは一般的な要件です。多くのバニラ JavaScript ソリューションが存在しますが、今回は、軽量ライブラリである Clipboard.js と、シンプルなツールヒント ライブラリである Hint.css を使用して、エレガントなコピー先を作成します。クリップボード機(jī)能。

ステップ 1: HTML 構(gòu)造

HTML は変わりません。これには、コピー アイコンの上にマウスを移動(dòng)したときにツールチップを表示する、Hint.css でスタイル設(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);
});

2,254 無料 リソース 開発者向け!! ?? ?? _{(毎日更新)}

1400 の無料 HTML テンプレート

372 件の無料ニュース記事

72 個(gè)の無料 AI プロンプト

333 の無料コード ライブラリ

Node、Nuxt、Vue などの 52 の無料コード スニペットとボイラープレート!

25 の無料のオープンソース アイコン ライブラリ

dailysandbox.pro にアクセスして、リソースの寶庫に無料でアクセスしてください!

コードの説明

• これにより、data-clipboard-text 屬性が目的の URL に動(dòng)的に設(shè)定されます。
• text: クリックされた要素の data-clipboard-text 屬性の値を返すコールバック関數(shù)を定義します。
• クリップボードのアクションが成功すると、ツールヒントが「コピーされました」に更新されます。
• 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'),
});

クリップボードのテキストの設(shè)定 :

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

このアプローチの利點(diǎn)

1. jQuery 依存関係なし : プレーンな JavaScript を使用することで、ソリューションは軽量で、最新の Web 標(biāo)準(zhǔn)と互換性があります。
2. Hint.css 統(tǒng)合 : 追加の JavaScript を使用せずに、クリーンで視覚的に魅力的なツールチップを提供します。
3. Clipboard.js Simplicity : カスタム ロジックを必要とせずに、クリップボードの操作を効率的に処理します。

結(jié)論

わずか數(shù)行のプレーンな JavaScript と、Clipboard.js および Hint.css の機(jī)能を使用して、クリーンでユーザーフレンドリーなクリップボードへのコピー機(jī)能を?qū)g裝しました。このアプローチでは、機(jī)能性と優(yōu)雅さを維持しながら、不必要な依存関係を回避します。

さあ、試してみましょう!ユーザーは、この機(jī)能のシンプルさと応答性を高く評(píng)価するでしょう。 ?

Web 開発に関するその他のヒントについては、DailySandbox をチェックし、無料のニュースレターに登録して時(shí)代の先を行きましょう!

以上がテキストをクリップボードにコピーする方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。