テキストボックスのフォーカス時に文字列を全部選択するJavaScript

検索窓などのテキストボックスにフォーカスがあたった際に、検索窓内の文字列を全部選択してあげるインタフェースは、細かなことですが親切でとても良いと思います。Firefoxに組み込まれている検索窓にはこの機能が実装されているようですが、本家Googleには、実装されていません。

どういうときに便利かというと、検索キーワードを変えて、何度も何度も検索する場合に、毎回Ctrl + Aで全部選択して、検索語句を削除して、また新しく入力してとやらなければならないのは、結構大変です。このCtrl + Aの操作をサイト側でやってあげることで、検索キーワードの削除もコピーペーストも格段に行いやすくなります。

テキストボックスのフォーカス時に文字列を全部選択する

以下は、テキストボックスのフォーカス時に文字列を全部選択するサンプルです。(textBoxfocus.html)

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>テキストボックスにフォーカスが移った瞬間に全選択するサンプル</title>
<script type="text/javascript" src="textBoxfocus.js" charset="UTF-8"></script>
</head>
<body>
<fieldset>
<legend>検索フォーム</legend>
<input type="text" id="keyword" name="keyword" value="検索語句を入力してください">
<input type="button" id="search" name="search" value="検索">
</fieldset>
</body>
</html>

JavaScript側の処理

onload = function() {
  var keyword = document.getElementById("keyword");
  keyword.focus();
  // フォーカスが移ったときは、全選択する
  keyword.onfocus = function() {
    keyword.select();
  }
}