【JavaScript】テキストエリアをクリックすると全選択＆コピーする方法

BLOGTOOLS.製作時に使用した技術やコードの一部を解説しています。

コードをコピーする際などにありがちな、テキストエリアをクリックすると中身が全選択されてコピーも完了するという機能を実装する方法を解説します。

コード自体は極めて簡単で、2行で済みます。

イベントを追加しても4行です。

 $(".result").on("focus", function(){
   $(this).select();
   document.execCommand("Copy");
 });

このコードの例では、resultというクラスを持つテキストエリアを対象としています。

resultクラスを持つテキストエリアにフォーカスが入る＝クリックすると中のコードが実行されます。

1行目の「$(this).select();」のthisはイベントの発生元であるテキストエリアを指します。

この1行により、テキストエリア内の文字がすべて選択されます。

続けて2行目の「document.execCommand("Copy");」を実行することでクリップボードへのコピーが行われます。

「"Copy"」の部分を「"Paste"」や「"Cut"」とすることで貼り付けや切り取りも可能です。

Javascriptからクリップボードを始めとしたローカル環境へのアクセスは厳しく制限されていますが、入力フォームへのごく簡単な操作であれば実行可能です。

しかし、あらゆる環境で成功するわけでないため、失敗するとfalseが返ってきます。