こんにちは、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の値をフォーカスですべて選択する方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

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

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