* [CODE(HTMLa)@en[autofocus]] 属性 (HTML、HTML DOM)

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

[3] [[内容属性]]
:状態:[[WHATWG]] [[WD]]
:[[要素型]]:[[フォーム制御子]]
:[CODE(DOMa)@en[[[type]]]]:[CODE(HTML)@en[[[hidden]]]]
と [CODE(HTMLe)@en[[QN[[[output]]][http://www.w3.org/1999/xhtml]]]]
を''除く''
:[[属性名]]:[CODE(HTMLa)@en[[[autofocus]]]]
:[[属性値]]:[[ブール型属性]] (>>4)
:[[既定値]]:[[偽]] (>>5)

[9] [[DOM属性]]
:状態:[[WHATWG]] [[WD]]
:[[界面]]:[CODE(DOMi)@en[[[HTMLInputElement]]]],
[CODE(DOMi)@en[[[HTMLTextAreaElement]]]],
[CODE(DOMi)@en[[[HTMLSelectElement]]]],
[CODE(DOMi)@en[[[HTMLButtonElement]]]]
:[[属性名]]:[CODE(DOMa)@en[[[autofocus]]]]
:[[型]]:[CODE(IDL)@en[[[boolean]]]]

[2] 仕様書:
- [[Web Forms 2.0]]
-- [CSECTION@en[2.10. The [CODE(HTMLa)@en[[[autofocus]]]] attribute]]
<IW:WF2:"#the-autofocus">

** 内容属性値

[4]
[[属性値]]を設定する場合は、
[CODE(DOM)@en[[[autofocus]]]] と[['''するべきです''']]。
[SRC@en[WF2 2.10]]

[5]

[[#comment]]

** DOM 属性値

[10] '''取得'''
[[DOM属性]] [CODE(DOMa)@en[[[autofocus]]]]
は、[[内容属性]] [CODE(HTMLa)@en[[[autofocus]]]]
が存在していれば、[[属性値]]に関わらず、
[CODE(IDL)@en[[[true]]]] が返される値と[['''しなければなりません''']]。
[[内容属性]]が存在しない場合は
[CODE(IDL)@en[[[false]]]] と[['''しなければなりません''']]。
[SRC@en[WF2 2.10]]

[11] '''設定'''
[[DOM属性]] [CODE(DOMa)@en[[[autofocus]]]]
は、[CODE(IDL)@en[[[true]]]] と設定された時には、
[[内容属性]] [CODE(HTMLa)@en[[[autofocus]]]]
の[[属性値]]は [CODE(HTML)@en[[[autofocus]]]]
と設定[['''しなければなりません''']]。
[CODE(IDL)@en[[[false]]]] と設定された時には、
[[内容属性]] [CODE(HTMLa)@en[[[autofocus]]]]
は削除[['''しなければなりません''']]。
[SRC@en[WF2 2.10]]

[[#comment]]

** HTML 直列化

[13]
([[XHTML]] ではない) [[HTML]] では、
[PRE(HTML example code)[
<input autofocus="autofocus">
]PRE]
と同じ意味で、
[PRE(HTML example code)[
<input autofocus>
]PRE]
と省略することができます。
[SRC@en[WF2 2.10]]

[[#comment]]

** レンダリング

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

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

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

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

** 誤り処理

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

* 濫用

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

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

* 例

[12]
[PRE(HTML example code)[
<input maxlength="256" name="q" value="" autofocus="autofocus">
<input type="submit" value="Search">
]PRE]

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

* メモ

[15] [CITE@en[HTML5 Revision Tracker]]
([TIME[2010-07-30 07:56:25 +09:00]] 版)
<http://html5.org/tools/web-apps-tracker?from=5221&to=5222>

[16] [CITE['''['''whatwg''']''' Two propositions for the autofocus attribute]]
([TIME[2010-08-25 09:09:30 +09:00]] 版)
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-August/028124.html>

[17] [CITE[''''''[''''''whatwg'''''']'''''' Autofocus readonly Input Elements]]
( ([TIME[2011-09-24 09:56:48 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-September/033284.html>

[18] [CITE@en[Web Applications 1.0 r8152     Make autofocus='' not force the 'load' event to be delayed by style computation.]]
( ([TIME[2013-08-22 14:23:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8151&to=8152>

[19] [CITE[IRC logs: freenode / #whatwg / 20130822]]
( ([TIME[2013-08-26 10:03:00 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20130822>

[21] [CITE@en[Queue a task to run all the autofocusing steps]]
([[domenic]]著, [TIME[2018-03-07 14:32:39 +09:00]])
<https://github.com/whatwg/html/commit/185190cac859144cfcd78248b906f3adae1f0594>

[22] [CITE@en[Autofocus has weird racy behavior · Issue #3467 · whatwg/html]]
([TIME[2018-03-08 15:24:37 +09:00]])
<https://github.com/whatwg/html/issues/3467>

[23] [CITE@en[Queue a task to run all the autofocusing steps by domenic · Pull Request #3488 · whatwg/html]]
([TIME[2018-03-08 15:26:31 +09:00]])
<https://github.com/whatwg/html/pull/3488>

[26] [CITE@en[Update autofocus processing algorithm]]
([[tkent-google]]著, [TIME[2019-09-04 01:07:59 +09:00]])
<https://github.com/whatwg/html/commit/2d783dbb7c6c0343b4850f3be935e893a1de5582>

[27] [CITE@en[Autofocus spec should probably allow browsers to delay running the focusing steps, maybe? · Issue #3551 · whatwg/html]]
([TIME[2020-08-31 17:50:18 +09:00]])
<https://github.com/whatwg/html/issues/3551>

[28] [CITE@en[Update autofocus algorithm · Issue #4645 · whatwg/html]]
([TIME[2020-08-31 17:51:45 +09:00]])
<https://github.com/whatwg/html/issues/4645>

[29] [CITE@en[Update autofocus processing algorithm by tkent-google · Pull Request #4763 · whatwg/html]]
([TIME[2020-08-31 17:52:03 +09:00]])
<https://github.com/whatwg/html/pull/4763>

[30] [CITE@en[Change the timing of "flush autofocus candidates"]]
([[tkent-google]]著, [TIME[2019-10-18 10:23:25 +09:00]])
<https://github.com/whatwg/html/commit/74b61242c716876bad8e24fe358796d31b9ecae1>

[31] [CITE@en[Prevent double-focusing with autofocus="" inside <dialog>]]
([[tkent-google]], [TIME[2019-11-08 03:58:13 +09:00]], [TIME[2021-03-08T07:27:26.000Z]])
<https://github.com/whatwg/html/commit/b48bb2238269d90ea4f455a52cdf29505aff3df0>

[32] [CITE@en[dialog, autofocus: Do not enqueue elements with autofocus attribute i… by tkent-google · Pull Request #4918 · whatwg/html]]
([TIME[2021-03-08T07:28:03.000Z]])
<https://github.com/whatwg/html/pull/4918>

[33] [CITE@en[Autofocus element in a <dialog> tries to get focus twice · Issue #4788 · whatwg/html]]
([TIME[2021-03-08T07:28:50.000Z]])
<https://github.com/whatwg/html/issues/4788>

[34] [CITE@en[Make autofocus="" work with delegatesFocus and <area>]]
([[tkent-google]], [TIME[2019-11-12 01:44:20 +09:00]], [TIME[2021-03-16T07:25:17.000Z]])
<https://github.com/whatwg/html/commit/bcd5d619063c809f297c1b8dfd13146ee2993371>

[35] [CITE@en[delegatesFocus doesn't work well with autofocus · Issue #5027 · whatwg/html]]
([TIME[2021-03-16T07:26:00.000Z]])
<https://github.com/whatwg/html/issues/5027>

[36] [CITE@en[focus: autofocus should work with shadow hosts with delegatesFocus an… by tkent-google · Pull Request #5059 · whatwg/html]]
([TIME[2021-03-16T07:27:01.000Z]])
<https://github.com/whatwg/html/pull/5059>