Clipboard.jsにコピー機能を実装する手順を詳しく解説

今回は、clipboard.jsにコピー機能を実装する手順について詳しく説明します。clipboard.jsにコピー機能を実装する際の注意点について、実際のケースを見てみましょう。

最近、仕事でボタンを使用して対応するコンテンツをコピーする必要が生じました。インターネット上で多くの解決策を見つけましたが、最終的に実装するためにclipboard.jsプラグインを選択しました。フラッシュや他のフレームワークに依存せず、サイズが小さく、使いやすく、互換性が高いためです。以下にその使い方を簡単に紹介します。

プラグインを導入すると、プラグインをダウンロードしたり、サードパーティの CDN を使用したりできます。

りー

HTML の場合、2 つの用途があります。

第一種

りー

注: ボタンを使用して別の要素のコンテンツをコピーする場合は、このメソッドを使用できます。このとき、ボタンをトリガー要素、コピーした要素をターゲット要素と呼びます。このとき、data-clipboard-target の値がターゲット要素のセレクターとなり、トリガー要素には data-clipboard-target の 属性 が設定されます。新しい Clipboard() はインスタンス化されたオブジェクトであり、パラメーターには HTML 要素、要素セレクター を使用できます。独自のロジックを監視して実装できる 2 つの イベント (成功とエラー) があります。コピー完了後は対象要素が選択状態となるため、対象要素の選択状態を解除するには e.clearSelection() が必要です。
利点: コピーされたコンテンツは動的になる可能性があり、ターゲット要素の値が変更されると、コピーされた値も変更されます。

適用可能なシナリオ: コピーされたコンテンツは可変であり、固定されていません。

2番目のタイプ

rreee

注: data-clipboard-text の値は、コピーするコンテンツです。ターゲット要素はなく、トリガー要素のみがあります。

欠点: コピーされたコンテンツは静的で変更されず、事前に設定されています。

該当するシナリオ: コピーされたコンテンツは修正されます

上記の欠点については、コピーされたコンテンツも動的になるように次のように最適化できます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Vue2.0 親子コンポーネントが相互に関数を転送する (コード付き)

JS オブジェクト指向の使用方法の詳細な説明

以上がClipboard.jsにコピー機能を実装する手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。