テキストをクリップボードにコピーする方法

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

---

ステップ 1: HTML 構造

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

---

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

1400 の無料 HTML テンプレート

372 件の無料ニュース記事

72 個の無料 AI プロンプト

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

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

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

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

---

コードの説明

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

クリップボードのテキストの設定 :

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

---

このアプローチの利点

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

---

結論

わずか数行のプレーンな JavaScript と、Clipboard.js および Hint.css の機能を使用して、クリーンでユーザーフレンドリーなクリップボードへのコピー機能を実装しました。このアプローチでは、機能性と優雅さを維持しながら、不必要な依存関係を回避します。

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

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

以上がテキストをクリップボードにコピーする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。