HTML输入标签怎么使用autofocus自动聚焦输入框-H5教程-PHP中文网

autofocus属性仅在html初始加载时生效，需满足元素已挂载、可见且未禁用三个条件，移动端和现代框架中应改用javascript主动聚焦。

html输入标签怎么使用autofocus自动聚焦输入框

直接在 <input> 标签上加 autofocus 属性就能让页面加载时自动聚焦，但它的生效有明确前提和边界，不是“写了就一定有效”。

autofocus 是一次性解析行为，不是实时开关
浏览器只在 HTML 初始加载、解析源码时识别这个属性。它不会响应后续 DOM 变更——比如 JS 动态插入、Vue/React 条件渲染、模态框 display: block 切换，这些场景下 autofocus 静默失效。

支持的元素和基本写法
✅ 有效元素：<input type="text">、<input type="search">、<input type="email">、<textarea></textarea>、<button></button>、<select></select>（部分浏览器支持）
❌ 无效元素：<input type="hidden">、<input type="checkbox">、<div>、禁用（<code>disabled）或隐藏（display: none / visibility: hidden）的元素

正确写法（布尔属性，不赋值）：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<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}">
}

不复杂但容易忽略