autofocus 仅在页面首次加载且 dom 已挂载时生效，易被 js、框架时机、移动端限制或 iframe 权限干扰；应改用 js 在 domcontentloaded 或组件挂载后调用 focus()。
autofocus 属性为什么没让输入框聚焦
autofocus 只在页面首次加载、元素插入 DOM 且未被 JS 干预时生效，不是“总能用”的开关。它会被后续 focus() 调用覆盖，也会被框架挂载时机、移动端限制或 iframe 权限拦截。
常见失效场景包括：
- 多个
autofocus共存，只有第一个元素获得焦点 - Vue/React 组件中模板写
autofocus，但 DOM 尚未挂载完成 - iOS Safari 在后台标签页、弹窗、iframe（无
allow="autofocus"）中直接忽略 -
autofocus和input.focus()混用，造成焦点跳变甚至键盘反复收起
解决办法很简单：删掉所有 autofocus，统一用 JS 控制。比如在 DOMContentLoaded 或 Vue 的 onMounted / React 的 useEffect 中调用 input.focus()，并加可选链避免 SSR 报错：ref.current?.focus()。
required + type + pattern 触发验证的真正时机
原生验证不是实时监听，只在两个时刻真正执行：表单提交（submit 事件）或手动调用 checkValidity() / reportValidity()。用户输错内容但没提交，浏览器不会主动提示。
关键细节：
-
required只判空值（''、未选select、未勾checkbox），不校验格式 -
type="email"允许foo@bar这类不完整邮箱通过——它只做基础结构检查 -
pattern默认全字符串匹配（隐式^...$），但必须配title才有错误文案，否则可能无提示 -
type="number"允许粘贴字母、允许清空后仍返回validity.valid === true，需配合min/max或 JS 补校验
想实现“离开字段就校验”，得监听 blur 或 input，再调 input.reportValidity() —— 注意 Firefox 不会自动滚动到错误项，Chrome 会。
novalidate 是禁用验证还是接管验证
novalidate 是移交控制权，不是关闭验证能力。它只作用于 <form></form> 标签，加在 <button></button> 或 <input> 上完全无效；也不能写成 novalidate="true" 或 novalidate=""，必须是纯属性存在。
加了 novalidate 后：
- 点击提交按钮不再弹浏览器默认气泡，
submit事件也不会被自动阻止 -
input.checkValidity()依然可用，返回值仍受required/pattern约束影响 -
input.validationMessage仍能读取浏览器生成的默认提示，可用于回退文案 -
form.reportValidity()仍会触发原生提示——所以一般不用它，除非临时调试
典型流程是：event.preventDefault() → 收集字段 → 调 checkValidity() → 手动设 data-invalid 或 class → firstInvalidInput.focus() → 验证通过后 fetch() 提交。
setCustomValidity 的“粘性”陷阱
setCustomValidity() 设错后不手动清空，该字段就永远验证失败。这不是 bug，是设计行为：一旦设为非空字符串，input.validity.valid 永远为 false，直到你显式调 setCustomValidity('')。
高频误用点：
- 在
input事件里反复设错，却不判断当前是否合法 - 用户修正输入后没清空，导致明明已合规仍报错
- 忘记在
blur或input合规时重置，只在错误分支里设值
安全写法是“验证即设，通过即清”：
input.addEventListener('input', () => {
if (input.value.length
<p>更稳妥的做法是在 <code>invalid</code> 事件里按 <code>validity</code> 子属性分情况设错，同时在 <code>input</code> 事件里统一清空——因为 <code>invalid</code> 只在验证失败时触发，而 <code>input</code> 是每次输入都触发。</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
