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

2017/02/15 ,

Internet Explorer (以下、IE) 以外のブラウザで、JavaScript からクリップボードへコピーさせるのが難しかったため、以前は Flash を経由させたライブラリ zeroclipboard を使うことがありましたが、Chrome もバージョンアップに伴い次のコマンドが使えるようになりました。

セキュリティの関係上 Flash を利用する方法は避けたかったので、これは朗報でした。それでは実際に実装してみましょう。

JavaScript で指定したテキストをコピーする関数

先ほどのコピーコマンドを見ても、どのように使ったら良いのか分からないかと思います。この処理で実際に行われるのはコピーだけなので、対象のテキストを指定しなくてはいけません。

一般的な処理のイメージでは、フォームオブジェクトのテキスト項目の value 値等を変数にセットして、その値を引数として放り投げると、クリップボードにコピーされる処理が思い浮かびます。しかし、このコピーコマンドは変数値をコピーするものではありません。

このコマンドでコピーするためには、対象のテキストを画面上で選択する必要がある点が最も重要なポイントです。フォームオブジェクトであればテキストを選択状態にするのは簡単ですが、任意の文字列をコピーさせるのは難しそうですよね。

そこで、任意のテキストがコピーできるような関数を用意しました。

ポイントは、裏でコピー用のテキストエリアを一時的に作る点です。そちらにコピー対象の文字列を一時的に出力し、画面上で選択してコピーコマンドを発行しています。コピー完了したら、作成したテキストエリアを削除して完了です。

実際のプログラム上では、copyTextToClipboard に任意の文字列を渡すことでコピーが行われるようになります。

それでは実際に動きを確認してみましょう。

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

以下のラジオボタンから選択してコピーボタンをクリックすると、対象の文字列をコピーします。下に空のテキストエリアを用意しておくので、そちらに貼り付けて確認してください。



PAGE TOP ↑