autofocus属性

ページが表示された時、入力欄がすでに選択された状態になっていることがあります。

本ページでは、グローバル属性のautofocusについて説明します。

autofocusとは

autofocusは、ページが開かれた時に要素をフォーカスします。フォーカスとは、テキストボックスなどが選択された状態のことです。

グローバル属性のため、すべてのHTML要素で使えます。

autofocusの利用例は、以下のとおりです。

【autofocus利用例】

<input type="text" name="text1" autofocus>

上記により、ページが表示された時に、テキストボックスが選択された状態になります。

なお、ページの途中で使うと、フォーカスした要素までスクロールして表示されます。つまり、説明が飛ばされていきなり入力になったりするため、留意が必要です。

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目	IE	Ed	Fx	Ch	Sa	Op
autofocus	〇	〇	〇	〇	〇	〇

【スマートフォン】
項目	Sa	An	Op	Ch	Fx	Sm
autofocus	×	〇	〇	〇	〇	〇

※スマートフォンのFirefoxとChromeは、Android版です。