0

入力フォームのfocusの位置が異なる件についての質問です。

Windows10のChromeでは入力フォームのfocusが画面上の一番上に表示されます。
iPhoneのSafariだと1つ下のフォームになっています。

調査したところ、どちらも一番上のフォームと二番目のフォーム、両方に<input>がautofocusに設定されていました。

なぜ、こういったずれが生じるのでしょうか。

3
  • 3
    該当のHTMLやCSSやJavascriptなどをご提示できますか?もしできない場合は、再現性の取れる最低限のソースがあればより回答が付きやすいと思います。
    – keitaro_so
    Commented 2019年7月10日 2:48
  • 当初の質問時から調査結果追記しました。autofocusが複数のフォームに設定されていました。その場合通常は一番上のフォームが適応されるのかと思いますが、なぜsafariでは二番目が優先で適応されているのでしょうか。
    – anko
    Commented 2019年7月10日 7:42
  • 1
    おそらくは単なるwebkitとBlinkの実装の違いなんでしょうが、提示されているような状況は仕様で明記されている "There must not be two elements with the same nearest ancestor autofocus scoping root element that both have the autofocus attribute specified." に該当しそうですね
    – hinaloe
    Commented 2019年7月10日 15:20

1 件の回答 1

0

なぜ、こういったずれが生じるのでしょうか。

理由は、Safariのバグです。autofocusがついた要素がページ中に複数ある場合の動作はHTML仕様で定義されていて、先にDOMツリーに繋がった要素が優先されます。ChromeとFirefoxはそのように動作します。Safariは仕様に準拠しておらず、優先順位なくすべてのautofocus付き要素にフォーカスを設定するため、一番最後の要素にフォーカスが残ります。

対処方法は、1ページ中に複数のautofocusがついた要素を含めないことです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。