根本原因是浏览器默认行为导致状态丢失：当面板被销毁（如v-if）或隐藏（display:none）时，控件焦点、滚动、checked等状态无法自动恢复；hidden属性可保留value、checked等状态且语义清晰。
标签页切换时表单输入值丢失，根本原因是什么
浏览器默认行为是：只要元素被移除 DOM 或设为 display: none，部分控件（尤其是 、、）的当前值虽仍保留在 value 属性中，但焦点、滚动位置、checked 状态（对 radio/checkbox）可能不被自动恢复；更严重的是，若用 v-if、innerHTML = '' 或手动 remove() 面板，整个节点被销毁，所有状态彻底清零。
关键判断：状态是否保留，取决于面板是否“还活着”——不是“看不看得见”，而是“还在不在 DOM 里”。
用 hidden 属性切换最省心，但必须手动初始化
hidden 是 HTML 原生属性，语义清晰，且浏览器会自动暂停内部 、、，同时保持表单控件的 value、checked、selectionStart 等状态，无障碍支持也原生到位（自动设 aria-hidden="true"）。
实操建议：
- 所有面板统一加
hidden属性（首次加载时全部隐藏） - 默认激活的面板，JS 中必须显式移除它的
hidden：document.getElementById('panel-home').hidden = false - 切换时只操作
hidden：panel.hidden = true/panel.hidden = false - 标签按钮用
data-tab="xxx"关联面板 ID，避免硬编码或依赖 DOM 顺序 - 不要用
setAttribute('hidden', '')，直接赋值布尔值更可靠
别碰 display: none —— 除非你确认没 iframe 和焦点需求
display: none 看似简单，但隐患明显：
-
会中断加载、重置状态（比如嵌入的表单编辑器、地图） -
/暂停且无法通过 JS resume（除非重新 src） - 输入框失去焦点后，再切回来不会自动聚焦，用户得手动点一次
- 屏幕阅读器可能跳过整个区域（需额外补
aria-hidden和tabindex）
仅当满足以下全部条件才考虑 display：
- 面板纯静态内容（无表单、无媒体、无第三方 widget）
- 不需要保持滚动位置
- 不要求跨切换后自动恢复焦点
否则，宁可用 visibility: hidden + position: absolute 占位，再配合 aria-hidden 手动同步。
多标签页间同步表单？localStorage + BroadcastChannel 是底线方案
单个页面内的标签页切换，靠 DOM 保活就够了；但用户开两个浏览器标签页填同一份表单，就得跨上下文通信。
核心链路：
- 用户输入时，实时写入
localStorage（键名建议带 URL 路径前缀，如form-apply-v1-username） - 监听
storage事件，自动回填本地已有值（注意防自触发：只在非当前窗口写入时才更新） - 更实时的场景加
BroadcastChannel：提交、切换、离开页面前广播变更，其他标签页响应更新 - 必须处理竞态：比如 A 标签页改了字段，B 标签页正要提交，得加版本号或时间戳比对，冲突时提示用户而非静默覆盖
容易被忽略的一点：表单提交成功后，务必清除 localStorage 对应键，并广播 clear 消息——否则用户下次打开页面，看到的还是旧草稿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
