html5のautofocus属性

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

4.10.19 Attributes common to form controls — HTML5

4.10 フォーム — HTML5 日本語訳

 

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

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

 

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

Web Forms - Dive Into HTML5

Internet Explorer 10.0~
Firefox 4.0~
Google Chrome 3.0~
Safari 4.0~
Opera 10.0~

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

 

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

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

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

Autofocus Attribute of HTML5 does not work only in FireFox when <Form><input> are loaded via Ajax. WHY? - Stack Overflow

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

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

 

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

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

HTML5 の autofocus 属性を jQuery でクロスブラウザに · terkel.jp