autofocus

autofocus

autofocus 属性 (HTML、HTML DOM)

[1] HTMLフォーム制御子autofocus 属性は、 焦点を自動的にその制御子に与えるべきことを示します。

[3] 内容属性

状態
WHATWG WD
要素型
フォーム制御子
type
hiddenoutput除く
属性名
autofocus
属性値
ブール型属性 (>>4)
既定値
(>>5)

[9] DOM属性

状態
WHATWG WD
界面
HTMLInputElement, HTMLTextAreaElement, HTMLSelectElement, HTMLButtonElement
属性名
autofocus
boolean

[2] 仕様書:

内容属性値

[4] 属性値を設定する場合は、 autofocusするべきですWF2 2.10

[5]

DOM 属性値

[10] 取得 DOM属性 autofocus は、内容属性 autofocus が存在していれば、属性値に関わらず、 true が返される値としなければなりません内容属性が存在しない場合は falseしなければなりませんWF2 2.10

[11] 設定 DOM属性 autofocus は、true と設定された時には、 内容属性 autofocus属性値autofocus と設定しなければなりませんfalse と設定された時には、 内容属性 autofocus は削除しなければなりませんWF2 2.10

HTML 直列化

[13] (XHTML ではない) HTML では、

<input autofocus="autofocus">
と同じ意味で、
<input autofocus>
と省略することができます。 WF2 2.10

レンダリング

[6] 利用者エージェントは、 フォーム制御子文書挿入された時、 autofocus 属性が設定されているかどうかを確認しなければなりません利用者エージェントは、 autofocus 属性が設定されており、 disabled ではなく、その環境で通常焦点を当てることができる種類のものであれば、 その制御子focus メソッドが呼ばれた場合と同じように焦点を授与するべきです閲覧領域を持つ利用者エージェントは、 焦点を当てることが可能かどうかに関わらず、 そのフォーム制御子が可視になるように文書スクロールするべきですWF2 2.10

[8] 利用者エージェントは、 利用者焦点を移して欲しくない場合にこの属性を無視して構いません。 例えば、利用者が入力を開始したら、 それ以後 autofocus は無視して構いません。 WF2 2.10

[14] Webブラウザ焦点を失っている時に autofocus が指定されていても、 焦点を得なければならないわけではありません。 WF2 2.10

[20] 履歴の移動で bfcache から復元した際は、 autofocus ではなく、以前の表示の際のフォーカスを復元するべきと思われます。

誤り処理

[7] 著者は、複数の有効な要素autofocus 属性を設定してはなりません。 複数の要素が autofocus な場合、順に >>6 のように処理されるので、 文書の読込み直後には文書順で最後の焦点を当てられるフォーム制御子焦点を得ることになります。 WF2 2.10

濫用

[24] この機能は、そのページの「メイン」というべきフォームコントロールがあるときだけ、 使うべきです。利用者の通常の操作を乱すような使い方は避けるべきです。

[25] ヘルプ記事ページに検索フォームが付属しているとき、 あくまで主たる内容は記事です。 検索フォームにフォーカスを与えることで何かを探している利用者の便をはかることになるかもしれませんが、 記事を読んでいてキーボードスクロールするような利用者には不便です。

[12]

<input maxlength="256" name="q" value="" autofocus="autofocus">
<input type="submit" value="Search">

この例では、文書が読込まれると、 テキスト欄焦点が当てられます。

メモ

[15] HTML5 Revision Tracker ( 版) http://html5.org/tools/web-apps-tracker?from=5221&to=5222

[16] [whatwg] Two propositions for the autofocus attribute ( 版) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-August/028124.html

[17] [whatwg] Autofocus readonly Input Elements ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-September/033284.html

[18] Web Applications 1.0 r8152 Make autofocus= not force the 'load' event to be delayed by style computation.]] ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8151&to=8152

[19] IRC logs: freenode / #whatwg / 20130822 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130822

[21] Queue a task to run all the autofocusing steps (domenic著, ) https://github.com/whatwg/html/commit/185190cac859144cfcd78248b906f3adae1f0594

[22] Autofocus has weird racy behavior · Issue #3467 · whatwg/html () https://github.com/whatwg/html/issues/3467

[23] Queue a task to run all the autofocusing steps by domenic · Pull Request #3488 · whatwg/html () https://github.com/whatwg/html/pull/3488

[26] Update autofocus processing algorithm (tkent-google著, ) https://github.com/whatwg/html/commit/2d783dbb7c6c0343b4850f3be935e893a1de5582

[27] Autofocus spec should probably allow browsers to delay running the focusing steps, maybe? · Issue #3551 · whatwg/html () https://github.com/whatwg/html/issues/3551

[28] Update autofocus algorithm · Issue #4645 · whatwg/html () https://github.com/whatwg/html/issues/4645

[29] Update autofocus processing algorithm by tkent-google · Pull Request #4763 · whatwg/html () https://github.com/whatwg/html/pull/4763

[30] Change the timing of "flush autofocus candidates" (tkent-google著, ) https://github.com/whatwg/html/commit/74b61242c716876bad8e24fe358796d31b9ecae1

[31] Prevent double-focusing with autofocus="" inside <dialog> (tkent-google, , ) https://github.com/whatwg/html/commit/b48bb2238269d90ea4f455a52cdf29505aff3df0

[32] dialog, autofocus: Do not enqueue elements with autofocus attribute i… by tkent-google · Pull Request #4918 · whatwg/html () https://github.com/whatwg/html/pull/4918

[33] Autofocus element in a <dialog> tries to get focus twice · Issue #4788 · whatwg/html () https://github.com/whatwg/html/issues/4788

[34] Make autofocus="" work with delegatesFocus and <area> (tkent-google, , ) https://github.com/whatwg/html/commit/bcd5d619063c809f297c1b8dfd13146ee2993371

[35] delegatesFocus doesn't work well with autofocus · Issue #5027 · whatwg/html () https://github.com/whatwg/html/issues/5027

[36] focus: autofocus should work with shadow hosts with delegatesFocus an… by tkent-google · Pull Request #5059 · whatwg/html () https://github.com/whatwg/html/pull/5059