最可靠的方式是删掉HTML中的autofocus属性，改用JavaScript在合适时机调用.focus()；autofocus仅在页面首次加载时生效且易静默失效，而JS可精准控制聚焦时机与条件。
想让表单输入框一打开就获得焦点，最直接的方式是用 autofocus 属性，但它只在页面首次加载时生效，且很多常见场景下会“静默失效”。真正可靠的做法，是删掉 HTML 里的 autofocus，改用 JavaScript 在合适时机调用 .focus()。
autofocus 属性怎么写才有效
autofocus 是布尔属性，不赋值更规范：
- ✅ 正确：
<input type="text" name="search" autofocus> - ✅ 兼容 XHTML：
<input autofocus="autofocus"> - ❌ 错误：
<input autofocus="true">或<input autofocus="">
它只对原生可聚焦元素起作用：<input>（text、email、search 等）、<textarea>、<button>、<select>。像 <div> 或禁用/隐藏的输入框加了也无效。
一个页面中只能有一个 autofocus 元素，多个时仅第一个按 DOM 顺序生效，行为不可靠，还可能干扰屏幕阅读器。
立即学习“前端免费学习笔记（深入）”；
autofocus 常见失效原因
它不是“自动聚焦开关”，而是浏览器在 HTML 初始解析阶段的一次性处理。以下情况它完全不工作：
- 表单是 Vue/React 组件挂载后动态插入的（SSR hydration 后已错过时机）
- 用 JS 动态设置
el.innerHTML = '<input autofocus>'或appendChild() - 元素被
display: none、visibility: hidden包裹，或带有disabled、readonly - iOS Safari 直接忽略 —— 这是策略限制，为防止非用户手势触发键盘弹出
- 页面从后台标签页切回时，系统可能重置焦点
用 JavaScript 实现真正可靠的聚焦
放弃 autofocus，统一用 JS 控制，确保只触发一次、时机准确、条件完备：
-
原生 JS：监听
DOMContentLoaded，检查元素存在且未被占用焦点：
document.addEventListener('DOMContentLoaded', () => {<br> const input = document.querySelector('input[name="username"]');<br> if (input && document.activeElement !== input) input.focus();<br> }); -
React：用
useRef+useEffect，加可选链防 SSR 报错：useEffect(() => { ref.current?.focus(); }, []); -
Vue 3：用
onMounted+ref，确保 v-if 已为 true：onMounted(() => inputRef.value?.focus()); -
模态框/弹窗：必须绑定在用户点击事件里（如按钮
onclick），否则 iOS Safari 不唤起键盘
移动端和表单重置的特别处理
单纯 .focus() 在 iOS Safari 中可能不弹软键盘，尤其在非用户手势上下文中：
- 可在用户点击后立即调用
input.focus()，并临时移除readonly（iOS 15+ 有效） - 表单提交后或调用
form.reset()时，焦点会丢失 —— 需监听reset或submit事件，再手动聚焦：form.addEventListener('reset', () => setTimeout(() => input.focus(), 0)); - 避免在
scroll、resize等高频事件中调用focus()，易被浏览器拦截
不复杂但容易忽略。
