ドリリウム

趣味をとことん突き詰めるブログ。高知 / 釣り / DIY / バイク / 車 / 家具制作 / アクアリウム / BMW / 地方移住 / ルノー・ルーテシア

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

ドリリウムは移転しました。

約5秒後に自動的にリダイレクトします。

f:id:katamichinijikan:20190701161943p:plain

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が返ってきます。

ブログを書いている人

カタミチ

ご意見・お問い合わせ等:syufukc@gmail.com

プライバシーポリシーおよび広告掲載等に関する表示事項