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

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

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

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

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

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

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

inputElement.select()

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

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

select()で値の選択は実装できるため、inputとtextareaがフォーカスされた際にselect()を実行する処理を作成します。フォーカスイベントをイベントリスナーに登録して、inputやtextareaがフォーカスされた際に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制作の世界に入ってある程度の年月が経過しましたが、inputとtextareaの値をすべて選択する処理を作ったのが今回が初めてでした。コピーが必要であったり、値をユーザーに選択してもらって何らかの処理をしたい場合に便利ですし、select()を呼び出すだけと実装も簡単なので、あるといいかも！と思ったら導入しても良いかもしれないですね。

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