autofocus

autofocus 全局属性 是一个布尔属性,指示元素应集中在页面加载时,或者当显示它所属的 <dialog> 时。

¥The autofocus global attribute is a Boolean attribute indicating that an element should be focused on page load, or when the <dialog> that it is part of is displayed.

html
<input name="q" autofocus />

文档或对话框中不得有多个元素具有自动对焦属性。如果应用于多个元素,第一个元素将获得焦点。

¥No more than one element in the document or dialog may have the autofocus attribute. If applied to multiple elements the first one will receive focus.

注意:autofocus 属性适用于所有元素,而不仅仅是表单控件。例如,它可能用于 contenteditable 区域。

¥Note: The autofocus attribute applies to all elements, not just form controls. For example, it might be used on a contenteditable area.

无障碍问题

¥Accessibility concerns

自动聚焦表单控件可能会让使用屏幕阅读技术的视障人士和有认知障碍的人士感到困惑。当分配 autofocus 时,屏幕阅读器会将用户 "teleport" 引导至表单控件,而不会事先警告他们。

¥Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When autofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.

应用 autofocus 属性时,请仔细考虑可访问性。自动聚焦于控件可能会导致页面在加载时滚动。焦点还可能导致动态键盘在某些触摸设备上显示。虽然屏幕阅读器将读出接收焦点的表单控件的标签,但屏幕阅读器不会读出标签之前的任何内容,并且小型设备上有视力的用户同样会遗漏由前面的内容创建的上下文。

¥Use careful consideration for accessibility when applying the autofocus attribute. Automatically focusing on a control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.

规范

Specification
HTML Standard
# dom-fe-autofocus

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility