根本原因是HTML属性必须在元素插入文档前设置，JS赋值仅修改当前值而不改变初始状态快照；autofocus对动态插入DOM无效，需手动focus；回填数据不能覆盖HTML默认值，FormData只收集带name属性的控件。
弹窗里的表单控件不显示默认值、回填失败、autofocus 失效，根本原因不是 JS 写错了，而是初始化时机和 DOM 状态没对上——HTML 属性必须在元素插入文档前就写好，JS 赋值只是“表面填充”，绕过浏览器原生表单状态管理。
为什么 form.reset() 后弹窗输入框变空而不是回到默认值
因为默认值没写在 HTML 属性里，而是靠 JS 动态赋的 value。浏览器只认 value="xxx"、checked、selected 这些属性；JS 写 input.value = 'xxx' 只改了当前值，不改变初始状态快照。
-
<input type="text" value="admin">✅ 页面加载即生效，form.reset()会恢复它 -
<input type="text" id="user">+document.getElementById('user').value = 'admin'❌reset()清空，不恢复 -
<select><option value="1" selected>Admin</option></select>✅ 下拉框初始选中 -
<textarea>default content</textarea>✅ 文本域默认内容必须写在标签体内，不能用value
弹窗打开时 autofocus 不起作用的真正原因
autofocus 是 HTML 解析阶段的行为，只对初始静态 DOM 有效。弹窗是动态插入的（比如 modal.appendChild(form)），此时 autofocus 属性已被忽略，浏览器不会重新触发聚焦逻辑。
- 必须手动调用
input.focus()，且最好加防重叠判断：if (document.activeElement !== input) input.focus() - 移动端（尤其 iOS Safari）禁止非用户手势触发的
focus()，所以要在点击“编辑”按钮后、弹窗显示完成的微任务中执行 - 别在
connectedCallback或modal.showModal()回调里直接focus()，要等渲染帧完成：requestAnimationFrame(() => input.focus())
编辑弹窗如何安全回填数据而不破坏 reset 行为
回填动作本身不能覆盖初始属性值，否则 form.reset() 就失效了。正确做法是：保留 HTML 中的原始 value（作为 reset 目标），再用 JS 把真实数据“覆盖”到当前值上。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 弹窗 HTML 中写：
<input name="name" value="<!-- 保留空或占位值 -->">，不要硬编码默认值 - 点击编辑按钮时，读取
button.dataset.name，然后执行：form.elements.name.value = button.dataset.name - 这样
form.reset()仍会清空回填内容，回到空状态，符合用户对“重置”的预期 - 如果字段允许空字符串作为合法值，初始
value就设为空：value=""，避免用?? ''在 JS 里兜底，那会污染初始状态
动态生成的表单项 name 属性漏写导致 FormData 为空
弹窗表单常通过 JS 拼 HTML 或 document.createElement 插入控件，但 new FormData(form) 只收集带 name 属性的元素——id、data- 都无效。
- 动态创建
input时，必须同步设置：input.name = 'email'; input.type = 'email'; - 用
innerHTML插入时，确保字符串含name="email"：form.innerHTML = '<input name="email">'; - 验证是否生效：在提交前
console.log([...new FormData(form)])，输出应为二维数组，如[["email", "a@b.com"]]，空数组说明至少一个控件缺name - 注意：自定义元素（如
<my-input></my-input>）不会被FormData自动捕获，需手动提取值并 append 到 FormData 实例
最易被忽略的一点：弹窗 DOM 节点复用时，上次的 value、checked 状态会残留，但初始 value 属性不会自动更新——所以每次打开弹窗，既要重置属性（如 el.setAttribute('value', '')），又要重置当前值（el.value = ''），二者缺一不可。
