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

JavaScript には、文字列をクリップボードに格納するための処理が用意されています。

document.execCommand('copy')

ただしこの処理には前提条件があって、コピーされるのは「処理実行時に画面上で選択しているテキスト」に限られます。つまりこのメソッドだけでは、任意の文字列をコピーさせることはできないのです。

そこでこの機能を拡張して、引数で渡した文字列を擬似的に選択状態にしてコピーさせる関数を用意しました。

JavaScript で任意のテキストをクリップボードにコピーする関数

この関数を実装する上でのポイントは、裏で文字列を選択するためのコピー用テキストエリアを一時的に作ることです。ここにコピー対象文字列を出力し、JavaScript で選択状態にすれば冒頭のコピーメソッドを実行することができます。

そしてコピーが完了したら、作成したテキストエリアを削除します。プログラム処理においては一瞬の出来事なので、画面上にテキストエリアが表示されるのを目視することはできません。では関数の内容を確認しましょう。

クリップボードコピー関数

/**
 * クリップボードコピー関数
 * 入力値をクリップボードへコピーする
 * [引数]   textVal: 入力値
 * [返却値] true: 成功　false: 失敗
 */
function copyTextToClipboard(textVal){
  // テキストエリアを用意する
  var copyFrom = document.createElement("textarea");
  // テキストエリアへ値をセット
  copyFrom.textContent = textVal;

  // bodyタグの要素を取得
  var bodyElm = document.getElementsByTagName("body")[0];
  // 子要素にテキストエリアを配置
  bodyElm.appendChild(copyFrom);

  // テキストエリアの値を選択
  copyFrom.select();
  // コピーコマンド発行
  var retVal = document.execCommand('copy');
  // 追加テキストエリアを削除
  bodyElm.removeChild(copyFrom);
  // 処理結果を返却
  return retVal;
}

プログラム上では copyTextToClipboard に任意の文字列を渡すことでコピーが行われます。では、この関数を組み込んだ処理を用意したので、動作確認をしてみましょう。

クリップボードコピー関数の動作サンプル

ラジオボタンを選択して [コピー実施] ボタンをクリックすると、該当の文字列をコピーします。下にテキストエリアを用意しておくので、そちらに貼り付けてコピーした内容を確認してください。

以上、JavaScript で任意のテキストをクリップボードへコピーする関数の紹介でした。