JavaScript を使用してページのコンテンツをコピーする 3 つの方法 (概要の共有)

コピー機能を実装できるサードパーティのプラグインは多数ありますが、自分で行う場合、実装方法はわかりますか?

この記事では、3 つの実装オプションを紹介します。

方法 1: 非同期クリップボード API

非同期クリップボード API を使用する

この方法は最も簡単に使用できますが、互換性はあまり良くなく、多くの要件があります。

サンプル コード:

const Promise = navigator.clipboard.writeText(newClipText);

メソッドの戻り値は Promise であることに注意してください。このメソッドを使用する場合は、ページにフォーカスがある必要があります。そうでない場合は、エラーが報告されます。

方法 2: Document.execCommand API は

Document.execCommand を使用します。

このメソッドは廃止され、Web 標準ではなくなりましたが、多くの歴史的な要因があり、ブラウザーは今後もこのメソッドをサポートすると考えています。

DOM 要素のコンテンツ

<p id="content">123456</p>

<button id="copyButton">コピー</button>

DOM 要素をコピーする場合は、選択 API と範囲 API を追加で使用する必要があります。

サンプル

コード:

const

copyButton = document.getElementById('copyButton');
const content = document.getElementById('content');
copyButton.addEventListener('クリック', function () {
  const 選択 = window.getSelection();
  const range = document.createRange();
  //選択したコンテンツを設定します range.selectNodeContents(content);
  // 選択をクリアします。selection.removeAllRanges();
  //選択したコンテンツを追加します。selection.addRange(range);
  document.execCommand('コピー');
});

まず選択をクリアしてから範囲を追加する必要があります。

ここには詳細な問題があります。コピー ボタンをクリックすると、コピーされたコンテンツが選択されますが、これは少し唐突です。

解決策は、コピーの完了後にselection.removeAllRanges()を呼び出して選択をクリアすることです。

ユーザーがページの一部をコピーする前に選択する別の状況を考えてみましょう。コピーが完了したら、選択したコピー コンテンツをクリアするだけでなく、コピー前にユーザーが選択したコンテンツを復元する必要もあります。

実装コードは次のとおりです。

const copyButton = document.getElementById('copyButton');
const content = document.getElementById('content');
copyButton.addEventListener('クリック', function () {
  const 選択 = window.getSelection();
  const range = document.createRange();
  //ユーザーが選択したコンテンツをキャッシュする const currentRange =
    selection.rangeCount === 0 ? null :selection.getRangeAt(0);
  // ドキュメントフラグメントを設定します range.selectNodeContents(content);
  // 選択をクリアします。selection.removeAllRanges();
  //ドキュメントフラグメントを選択したコンテンツとして設定します。selection.addRange(range);
  試す {
    // クリップボードにコピー document.execCommand('copy');
  } キャッチ (エラー) {
    // コピーが失敗したことを示すプロンプトを表示します}finally {
    選択.removeAllRanges();
    if (currentRange) {
      // ユーザーが選択したコンテンツを復元します。selection.addRange(currentRange);
    }
  }
});

まずユーザーが選択したコンテンツをキャッシュし、コピーが完了したら復元します。

input 要素のコンテンツをコピーし

、input 要素オブジェクトのselectメソッドを使用してコンテンツを選択します。選択したコンテンツを設定するために範囲フラグメントを作成する必要はありません。

コード例:

const copyButton = document.getElementById('copyButton');
const inputEl = document.getElementById('input');
copyButton.addEventListener('クリック', function () {
  const 選択 = window.getSelection();
  const currentRange =
    selection.rangeCount === 0 ? null :selection.getRangeAt(0);
  //入力内容を選択 inputEl.select();
  //クリップボードにコピー try {
    document.execCommand('コピー');
  } キャッチ (エラー) {
    // コピーが失敗したことを示すプロンプト // 。 。 。
  } ついに {
    選択.removeAllRanges();
    if (currentRange) {
      // ユーザーが選択したコンテンツを復元します。selection.addRange(currentRange);
    }
  }
});

[コピー] ボタンをクリックしても、以前に選択したコンテンツは削除されません。

方法 3: コピー イベントを上書きする

w3c.github.io/clipboard-a…

例として上記のリンクのコードの一部を引用します。

// クリップボードにコピーされているものを上書きします。
document.addEventListener('copy', function (e) {
  // e.clipboardData は最初は空ですが、これを
  // クリップボードにコピーしたいデータ。
  e.clipboardData.setData('text/plain', '洋風スクランブルエッグ');
  // これは、現在のドキュメント選択が無効になるのを防ぐために必要です。
  // クリップボードに書き込まれます。
  e.preventDefault();
});

ページ上の任意の内容をコピーして貼り付けると、出力内容は「洋風スクランブルエッグ」になります。