【JavaScript】inputやtextareaの値をフォーカスですべて選択する

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptでinputやtextareaの値をフォーカスですべて選択する方法をご紹介しています。

JavaScriptでinputやtextareaがフォーカスされた際に値をすべて選択したいんだけど、良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

select()で値をすべて選択する

inputtextareaではselect()を使用することができます。select()inputtextareaの値をすべて選択することができるHTMLInputElementのメソッドです。

select()は下記の方法で呼び出します。

inputElement.select()

select()を実行すると指定したinputtextareaの値をすべて選択することができます。

フォーカスして値をすべて選択する

select()で値の選択は実装できるため、inputtextareaがフォーカスされた際にselect()を実行する処理を作成します。フォーカスイベントをイベントリスナーに登録して、inputtextareaがフォーカスされた際にselect()を実行します。下記にサンプルソースとデモを掲載しておりますので、実装される際に参考にしていただければと思います。

HTML

<input id="text" type="text" value="123456">

JavaScript

const text = document.getElementById('text')

//アロー関数の場合
text.addEventListener('focus', event => event.target.select())

//無名関数の場合
text.addEventListener('focus', function(){
    this.select()
})

実行結果

See the Pen 7301 by ryohei (@intotheprogram) on CodePen.

実行結果に表示されているinputをフォーカスすると値が選択されます。ちゃんと要件を満たした形で実装できていますね。上記はアロー関数で実装していますが、無名関数の場合でも同様の結果となりますので、対応ブラウザを考慮して選択いただければと思います。

最後に

Web制作の世界に入ってある程度の年月が経過しましたが、inputtextareaの値をすべて選択する処理を作ったのが今回が初めてでした。コピーが必要であったり、値をユーザーに選択してもらって何らかの処理をしたい場合に便利ですし、select()を呼び出すだけと実装も簡単なので、あるといいかも!と思ったら導入しても良いかもしれないですね。

以上、JavaScriptでinputやtextareaの値をフォーカスですべて選択する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍