ドリリウム

趣味をとことん突き詰めるブログ。ペット / フィンチ / 鳥 / 文鳥 / ジュウシマツ / 写真 / カメラ / 高知 / 釣り / DIY / バイク / 車 / 家具制作 / アクアリウム / コーヒー / 地方移住 / ルノー・ルーテシア / SUZUKI ST250 E type / EOS Kiss M

こんにちは。カタミチ(@katamichi2h)です。

お問い合わせsyufukc@gmail.com / Twitter

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

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

▼IT系の転職なら

▼誰かにプログラミングを教えてみませんか?

▼釣り具の宅配買取なら