HTMLのテキスト入力でChromeのオムニボックスのようなテキスト選択動作をさせるには？

HTMLのテキスト入力でChromeのオムニボックスのようなテキスト選択動作をさせるにはどうしたらいいだろう？

Chromeのオムニボックスは、クリックしてフォーカスされるとテキストが全選択される。フォーカスされている状態でクリックすると普通のテキスト選択ができる。

こんな単純な動作なんだけど、実装しようとすると意外と迷ったのでまとめておこうと思う。

ポイントはonfocusイベントでなくonmouseupイベントでテキスト全選択を行うところ。

一連のイベントはonmousedown、onfocus、onmouseupの順で流れていくが、「他からフォーカスが移ってきた」ことを判断するには当然のことながらonfocusではすでに遅く、その前のonmousedownでonfocusが行われる前にフォーカスされているエレメントを保存しておく必要がある。

こうしておけばonmouseupした時に前にフォーカスされたエレメントと現在フォーカスされているエレメントを比較することで「他からフォーカスが移ってきた」ことを判断できる。

あとおまけとして、オムニボックスでエンターキーを押すと検索などが始まるが、このような動作をonkeydownイベントに書くとIMEで文字を確定させるためにエンターキーを押した場合にも反応してしまうのでonkeypressイベントに書くといい。

実際にはこのようにする。