autofocus とは
- ここで説明する autofocus とは次の語句からなる HTML 要素の属性です。
- auto
- 読み: オート
意味: 自動 - focus
- 読み: フォーカス
意味: 焦点
autofocus 属性の概要
この属性は input 要素などの入力要素に自動フォーカス機能を付与するための属性です。
フォーカスとは焦点を当てるという意味ですので、ユーザーが入力要素をクリックすることなく 自動的に入力待機の状態にすることができます。
この属性のデータタイプは Boolean 型 (論理型) ですので、入力要素に autofocus を設定すれば 「 autofocus = true 」 となり、 autofocus がなければ 「 autofocus = false 」 となります。
なお、この autofocus 属性は 1ページ中に 1つの入力要素を対象にして設定することが前提条件となります。 もしも複数の要素に autofocus を設定した場合はコード上で初めに読み込まれた autofocus が優先されます。
サンプルコードと実行結果
サンプルコード: HTML
<body>
<p><input type="text"></p>
<p><input type="text" autofocus></p>
<p><input type="text"></p>
</body>
- 02: 説明 (注釈)
|
#1: |
このボタンは、ページを読み込んだ直後の状態を再現するために設置しています。 サンプルコードの autofocus 属性はページを読み込んだ直後に自動フォーカスしますので、 実際の autofocus 属性の動きはページを開きなおして確認されても良いと思います。 |
|
#2: autofocus = true |
|
|
#3: |
サンプルの補足
このページの動作サンプルでは autofocus 属性の動作を再現するために JavaScript を実行するためのボタンを設置しています。
これは HTMLInputElement の focus() メソッドを使用していますが、このページの主旨とは異なりますので混乱を避ける為に、 その部分のコードと説明は省略しています。