コードをコピーする際などにありがちな、テキストエリアをクリックすると中身が全選択されてコピーも完了するという機能を実装する方法を解説します。
コード自体は極めて簡単で、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が返ってきます。
