【JavaScript】テキストを選択してクリップボードにコピーする方法

@ハクト 2022-12-19 12:27:45に投稿

「select()」メソッドを使用しフォーム以外の要素をクリップボードにコピーしようとしたらエラーになってしまったので、以下にフォーム要素とフォーム要素以外のテキストをクリップボードにコピーする方法を記載します。

フォーム要素(「input」「textarea」等)を選択してクリップボードにコピー

// テキストエリアを選択
document.getElementById('textarea-1').select();

// 選択された内容をクリップボードにコピー
document.execCommand('copy');

フォーム以外の要素(「div」,「pre」等)を選択してクリップボードにコピー

  const targetElement = document.getElementById('target'); //コピー対象の要素
  const selection = window.getSelection();   // 選択されている文字列を取得
  const range = document.createRange();      // 選択範囲を作成する

  //選択範囲を設定
  range.selectNodeContents(targetElement);     
  
  //現在の選択を解除
  selection.removeAllRanges();
  
  //選択範囲を追加
  selection.addRange(range);

  // 選択された内容をクリップボードにコピー
  document.execCommand('copy');

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter