表单提交后focus()失效是因为页面刷新导致dom重建，原焦点调用丢失；正确做法是新页面在domcontentloaded时聚焦首个可用表单元素，或ajax提交后在成功回调中调用focus()。
表单提交后页面刷新，focus() 为什么没生效
因为页面刷新后 DOM 重新加载，之前绑定的 focus() 调用早已失效。如果你在 submit 事件里直接写 document.querySelector('input').focus()，它确实执行了，但紧接着页面跳转或刷新，焦点就丢了——这不是 JS 错误，是生命周期问题。
常见错误场景包括：form 没设 action（触发表单默认提交并刷新）、用了 button type="submit"、或未调用 event.preventDefault()。
- 若后端返回的是完整 HTML 页面（非 JSON），必须等新页面 DOM 就绪后再聚焦
- 若用 AJAX 提交，可在成功回调里安全调用
focus() - 服务端渲染（如 PHP/Flask）中，更可靠的做法是在新页面的
<script></script>中聚焦
服务端渲染页面：在新页面 onload 后聚焦首个 input
最通用、兼容性最好的方式：让新加载的页面自己完成聚焦。无需 JS 框架，纯原生即可。
把这段代码放在新页面的 底部或 <script></script> 标签中：
document.addEventListener('DOMContentLoaded', () => {
const firstInput = document.querySelector('input:not([type="hidden"]):not([type="submit"]):not([type="button"]), textarea, select');
if (firstInput && !firstInput.hasAttribute('readonly') && !firstInput.hasAttribute('disabled')) {
firstInput.focus();
}
});
注意点：
-
input[type="hidden"]等类型必须排除，否则会聚焦到看不见的元素上 - 检查
readonly和disabled属性，避免聚焦失效或报错 - 不用
window.onload，它等资源（如图片）加载完才触发，太晚；DOMContentLoaded更及时
AJAX 提交时，在 success 或 then() 中调用 focus()
如果你用 fetch 或 axios 提交表单，并且不刷新页面，那聚焦时机很明确：等响应处理完、校验通过、UI 更新后立即执行。
示例（fetch）：
form.addEventListener('submit', async (e) => {
e.preventDefault();
const res = await fetch('/login', {
method: 'POST',
body: new FormData(form)
});
if (res.ok) {
// 清空表单或跳转
form.reset();
// 此时 DOM 还在，可安全聚焦
const firstInput = form.querySelector('input, textarea, select');
if (firstInput) firstInput.focus();
} else {
// 错误提示后，也建议聚焦第一个输入框方便修改
const firstInput = form.querySelector('input, textarea, select');
if (firstInput) firstInput.focus();
}
});
关键细节：
- 必须先
e.preventDefault()，否则表单仍会走默认提交流程 - 不要在
catch外层直接focus()，确保 DOM 未被销毁或替换 - 如果提交后清空了表单（
form.reset()），聚焦要放在它之后，否则可能聚焦到旧节点
用 autofocus 属性？小心它的限制
autofocus 是最简方案，但它只在页面**首次加载**时生效，且浏览器会忽略重复设置（比如刷新后再次触发）。更重要的是：它无法响应“提交失败后重聚焦”的需求。
所以仅适用于：
- 纯静态首页表单（无提交逻辑）
- 确认该页面**不会**因表单提交而重新生成（即不依赖服务端跳转）
- 不需要根据后端响应动态决定是否聚焦（比如登录失败后需保留用户输入并聚焦账号框）
写法很简单：<input type="text" autofocus>，但别指望它解决提交后的聚焦问题。
真正容易被忽略的点是：很多开发者以为加了 autofocus 就一劳永逸，结果在表单验证失败、页面重绘、或 Vue/React 组件重挂载后，焦点就消失了——这时候必须用 JS 主动控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
