html5のautofocus属性

html5からformタグ内で使われる入力系タグに"autofocus(オートフォーカス)"属性が追加されています。

ページの読み込み時に、autofocus属性を持つ項目にフォーカスが当たった状態となります。

このautofocusですが、使い方やブラウザのバージョンによって効かなくなることがあるようです。

まずはブラウザです。以下のサイトによると、対応されたバージョンはそれぞれ次のようになります。

IE9などは対応していません。

次に、各ブラウザの実装方法です。

Internet ExplorerやGoogle Chromeなどは比較的素直に、ページが読み込まれた際に自動でフォーカスを当ててくれます。

しかし、Firefoxは自動フォーカスをonload時に限定しているようです。

何が困るのかというと、jQueryでロードした場合などには効きません。

素直にhtml内へautofocus属性を付与していればFirefoxでも有効ですが、そのhtmlを別のページから呼び出した場合は無効となります。

どちらが正しい実装かは何とも言えませんが、使う際は留意しておくとよいかもしれません。

どのブラウザでも汎用的に使いたい場合は、jQueryで実装する方法が提唱されています。