autofocus仅对可聚焦的交互型表单控件生效,如text、email等,不支持hidden、checkbox等;同一页面仅首个autofocus元素生效;动态插入或SPA路由切换后需手动focus();移动端限制严格,无障碍使用需谨慎。
autofocus 属性只对特定表单控件生效
不是所有
类型都支持
。它仅适用于可获得焦点且用户可交互的元素,比如:
、
、
、
、
、
、
、
等;
、
(部分浏览器限制)、
、
通常不触发或行为不一致。
其他支持元素包括:
、
、
(但某些旧版 Safari 对
的 autofocus 支持不稳定)。
常见错误是给
或
加
,结果无反应——这不是 bug,是规范限制。
页面加载时只有一个元素能真正获得焦点
HTML 规范明确:同一文档中多个
属性存在时,**只有第一个被解析到的元素生效**,其余被忽略。浏览器不会报错,也不会给出提示。
立即学习
“
前端免费学习笔记(深入)
”;
容易踩的坑:
动态插入含
的元素(如通过 JS 插入 DOM),该属性不会触发聚焦——
是加载时行为,不响应后续 DOM 变更
SPA 中路由切换后新渲染的
输入框不会自动聚焦,需手动调用
模态框(modal)内使用
时,若模态框本身未显示(display: none / visibility: hidden),聚焦会失败或被丢弃
与 JavaScript focus() 的关键区别
是声明式、由浏览器在初始 HTML 解析阶段控制的;而
是命令式、运行时可控的,更灵活但也更易出错。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
典型差异:
不会触发
事件(因为聚焦发生在事件循环之前),而
会
在元素不可见、被遮挡、或
时可能静默失败;
同样受限,但失败时无反馈
移动端 iOS Safari 对自动聚焦限制极严:只有用户手势触发的上下文(如点击按钮后)才允许
,
在非主文档(如 iframe)或非首屏加载中基本无效
示例:想确保模态框输入框聚焦,不能只靠
,得这样补一手:
无障碍与用户体验的实际影响
会跳过页面顶部内容(如跳过导航、banner),对屏幕阅读器用户可能造成困惑,尤其当焦点落在中间表单而非页首时。
WCAG 建议:仅在有明确用户意图时使用(如搜索页、登录弹窗),避免在首页或内容页滥用。如果页面有重要通知、错误提示或导航变更,自动聚焦反而干扰操作流。
另一个现实问题:Chrome 93+ 开始,当用户从地址栏回车打开页面时,若页面含
,焦点会“抢走”地址栏原本的选中状态,导致用户无法直接按 Ctrl+L 再编辑 URL——这个细节常被忽略,但真实影响高频操作用户。
autofocustextsearchtelurlemailpasswordnumberdatehiddenfilerangecolorautofocusautofocusautofocusautofocusautofocuselement.focus()autofocusautofocuselement.focus()autofocusfocus.focus().focus()tabindex="-1"autofocus.focus()autofocusautofocusmodalElement.addEventListener('shown', () => {
const input = modalElement.querySelector('input');
if (input) input.focus();
});autofocusautofocus