autofocus属性仅在HTML初始加载时生效，需满足元素已挂载、可见且未禁用三个条件，移动端和现代框架中应改用JavaScript主动聚焦。
直接在 <input> 标签上加 autofocus 属性就能让页面加载时自动聚焦，但它的生效有明确前提和边界，不是“写了就一定有效”。
autofocus 是一次性解析行为，不是实时开关
浏览器只在 HTML 初始加载、解析源码时识别这个属性。它不会响应后续 DOM 变更——比如 JS 动态插入、Vue/React 条件渲染、模态框 display: block 切换，这些场景下 autofocus 静默失效。
支持的元素和基本写法
✅ 有效元素：<input type="text">、<input type="search">、<input type="email">、<textarea>、<button>、<select>（部分浏览器支持）
❌ 无效元素：<input type="hidden">、<input type="checkbox">、<div>、禁用（disabled）或隐藏（display: none / visibility: hidden）的元素
正确写法（布尔属性，不赋值）：
<input type="text" name="q" placeholder="搜索" autofocus> <textarea autofocus></textarea> <button autofocus>确认</button>
必须满足的三个条件
- 元素已挂载在 DOM 中（不能在
v-if、*ngIf或{show && <input>}这类条件块内） - 元素当前可见（父容器不能是
display: none或visibility: hidden） - 元素未被
disabled或readonly禁用
一个页面只能有一个 autofocus
多个 autofocus 同时存在时，浏览器通常只处理第一个（按 DOM 顺序），其余被忽略。这不仅影响功能，还可能干扰屏幕阅读器的焦点流。
移动端和现代框架里别依赖它
iOS Safari 几乎总是忽略 autofocus，尤其在非用户手势触发的弹窗中；React/Vue 的组件挂载时机也早于 HTML 解析完成，导致模板里的 autofocus 失效。这时应改用 JavaScript 主动聚焦：
// 原生 JS（确保 DOM 加载完成）
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('#search-input');
if (input && input.offsetParent !== null && !input.disabled) {
input.focus();
}
});<!-- Vue -->
<template>
<input ref="inputRef" />
</template>
<script setup>
import { onMounted } from 'vue'
const inputRef = ref(null)
onMounted(() => {
inputRef.value?.focus()
})
</script><!-- React -->
function SearchInput() {
const inputRef = useRef(null)
useEffect(() => {
if (inputRef.current && document.activeElement !== inputRef.current) {
inputRef.current.focus()
}
}, [])
return <input ref={inputRef} />
}不复杂但容易忽略
立即学习“前端免费学习笔记（深入）”；
