forms - HTML5オートフォーカスを使用してフォーカスが非表示のフォームコントロールに設定されますか？

Question

タイトルにあるように：またはautofocus="autofocus"で非表示になっている場合でも、フォームコントロールにフォーカスが設定されますdisplay: none;かvisibility: hidden;？

Answer 1

非表示フィールドが表示フィールドからオートフォーカスを盗むことができるかどうかという質問の場合、答えはノーです。

プロパティを持つ隠しフィールドは、autofocus表示されるとフォーカスを取得します。

これは、可視フィールドと非表示フィールドがあり、非表示フィールドを表示するとどうなるかを示す jsFiddle です。

次に示すのは、可視フィールドにプロパティがない場合に何が起こるかを示すバリエーションです。autofocus

Answer 2

HTML5 ドラフト標準では、要素が「フォーカス可能」であることのみが要求されます。ここで、フォーカス可能とは次のことを意味します。

ユーザー エージェントの既定の動作でフォーカス可能である場合、または要素が特別にフォーカス可能である場合、要素はフォーカス可能ですが、要素がレンダリングされているか、埋め込みコンテンツを表すキャンバス要素の子孫である場合に限ります。ユーザー エージェントは、プラットフォームの規則で別の指示がない限り、次の要素をフォーカス可能にする必要があります。

• ahref属性を持つ要素
• linkhref属性を持つ要素
• button無効になっていない要素
• inputtype 属性が Hidden 状態ではなく、無効になっていない要素
• select無効になっていない要素
• textarea無効になっていない要素
• commanddisabled 属性を持たない要素
• 属性が設定された要素draggable。ユーザー エージェントが、ユーザーがポインティング デバイスを使用せずにそれらの要素のドラッグ操作を開始できるようにする場合
• ホストの編集
• コンテキスト コンテナーの参照

「ただし、要素がレンダリングされている場合のみ...」と述べており、標準では「レンダリング」を次のように定義しています。

要素がドキュメント内にある場合、要素はレンダリングされています。その親ノード自体がレンダリングされているか、ドキュメント ノードであり、次のいずれかを使用してレンダリングから明示的に除外されていません。

• CSS の「display」プロパティの「none」値、または
• 'visibility' プロパティの 'collapse' 値。ただし、'hidden' 値と同等に扱われている場合を除きます。
• 他のスタイリング言語の同等のもの。オフスクリーンであることは、要素がレンダリングされていないことを意味しません。hidden 属性の存在は、通常、要素がレンダリングされていないことを意味しますが、これはスタイル シートによってオーバーライドされる場合があります。それでも、著者レベルの CSS スタイル シートを尊重しないユーザー エージェントは、この仕様と関連する CSS および Unicode 仕様と一致する方法で、これらのセクションで指定された CSS ルールを適用したかのように動作することが期待されます。

要するに、答えは、他のすべての要件が満たされている場合、display:none焦点が当てられることはありませんが、display:hiddenすべてのブラウザが実際に仕様に従っていると仮定すると、そうなるようです。