ユーザーインターフェースの改善: テキストボックスにフォーカスが当たるとすべての内容を選択する方法 (Vanilla JS & jQuery)

2024-04-02

テキストボックスにフォーカスが当たるとすべての内容を選択する (Vanilla JS または jQuery)

Vanilla JS

方法 1: select() メソッドを使う

これは最も簡単な方法です。テキストボックスにフォーカスが当たった時に select() メソッドを呼び出すだけです。

const textbox = document.getElementById("textbox");

textbox.addEventListener("focus", () => {
  textbox.select();
});

方法 2: setSelectionRange() メソッドを使う

この方法は、より細かく制御したい場合に役立ちます。setSelectionRange() メソッドを使えば、選択範囲の開始位置と終了位置を指定できます。

const textbox = document.getElementById("textbox");

textbox.addEventListener("focus", () => {
  textbox.setSelectionRange(0, textbox.value.length);
});

jQuery を使えば、さらに簡単に記述できます。

$("#textbox").focus(() => {
  $(this).select();
});

上記の方法のいずれかを使えば、テキストボックスにフォーカスが当たった時にすべての内容を選択することができます。

Vanilla JS

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vanilla JS Example</title>
</head>
<body>
  <input type="text" id="textbox">

  <script>
    const textbox = document.getElementById("textbox");

    textbox.addEventListener("focus", () => {
      textbox.select();
    });
  </script>
</body>
</html>

jQuery

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="text" id="textbox">

  <script>
    $("#textbox").focus(() => {
      $(this).select();
    });
  </script>
</body>
</html>

動作確認

テキストボックスにフォーカスが当たるとすべての内容を選択する他の方法

onfocus イベント属性を使う

HTML の input 要素に onfocus イベント属性を設定することで、フォーカスが当たった時に JavaScript コードを実行できます。

<input type="text" id="textbox" onfocus="this.select()">

const textbox = document.getElementById("textbox");

textbox.addEventListener("focus", () => {
  textbox.setSelectionRange(0, textbox.value.length);
});

execCommand() メソッドを使えば、さまざまな編集コマンドを実行できます。

const textbox = document.getElementById("textbox");

textbox.addEventListener("focus", () => {
  textbox.focus();
  document.execCommand("selectAll", false, null);
});