HTML Living Standard/autofocus属性
autofocus属性
[編集]autofocus属性は、Webページが読み込まれた際に自動的にフォーカスを当てる要素を指定するために使用される属性です。この属性は、フォームの入力フィールドやボタンなど、ユーザーがすぐに操作できる要素にフォーカスを設定する際に便利です。
基本構文
[編集]<element autofocus></element>
autofocus属性はブール属性で、指定することでその要素がページロード時に自動的にフォーカスされます。
使用例
[編集]以下に、autofocus属性を使用した具体的な例を示します。
<form> <label for="name">名前:</label> <input type="text" id="name" name="name" autofocus> <br> <label for="email">メールアドレス:</label> <input type="email" id="email" name="email"> </form>
この例では、ページが読み込まれると、nameフィールドが自動的にフォーカスされます。
注意点
[編集]- ページ内に複数の
autofocus属性を持つ要素がある場合、最初に出現する要素のみがフォーカスされます。 - 自動フォーカスは、ユーザー体験を向上させる一方で、フォームの自動送信やユーザーの意図しない動作を引き起こす可能性があります。そのため、使用する際には注意が必要です。
- モバイルデバイスでは、
autofocus属性が期待通りに動作しない場合があります。特に、仮想キーボードの自動表示を避けるために挙動が抑制されることがあります。
対応ブラウザ
[編集]autofocus属性は主要なブラウザで広くサポートされています。ただし、ブラウザの設定やユーザーの環境によっては動作が異なる場合があります。
互換性 ブラウザ サポート状況 Chrome 対応 Edge 対応 Firefox 対応 Safari 対応 Opera 対応