弹窗表单控件不显示需加open属性或调用showmodal()；input不可编辑需排查inert/aria-hidden；formdata只收集name属性；按钮需显式设type="button"防误提交。
弹窗里表单控件不显示？先确认dialog是否带open属性
很多情况下，<dialog></dialog>写进 HTML 但完全看不见，不是 CSS 没生效，而是它默认就是 display: none——连 visibility: visible 或 opacity: 1 都救不回来。必须显式加 open 属性，或用 JS 调用 showModal() / show()。
常见错误：
- 只写了
<dialog><form>...</form></dialog>，没加open，也没调 JS 方法 → 页面上彻底不可见 - 用
dialog.style.display = 'block'强行覆盖 → 失去模态行为（无遮罩、Esc 不响应、焦点不锁定） - 动态插入
<dialog></dialog>后立刻调showModal()，但 DOM 尚未完成挂载 → 报错Cannot read property 'showModal' of null
稳妥做法：静态写入 <dialog id="editDialog" open></dialog> 用于调试；生产环境用 document.getElementById('editDialog').showModal()，且确保该元素已存在于 DOM 中。
input、select在弹窗中不可编辑？检查inert和aria-hidden
用 <div> 手写弹窗时，常为防背景交互而给 <code>body 加 inert，或给非弹窗区域设 aria-hidden="true"。但若误加在弹窗容器自身或父级，会导致内部所有表单控件失焦、无法点击、键盘输入失效。
排查要点：
- 打开浏览器开发者工具，选中某个
<input>，看 computed 样式里pointer-events是否为none - 检查弹窗父容器是否被 JS 动态加了
inert属性（尤其用第三方 modal 库时） - 确认没有全局 CSS 规则如
dialog[aria-hidden] input { pointer-events: none; }这类误匹配 - 移动端特别注意：
z-index不够高时，软键盘可能顶起页面，导致弹窗实际被遮挡（视觉上可见，但触摸坐标错位）
弹窗表单提交后值为空？FormData 只认name，不认id或data-属性
new FormData(form) 构造函数只收集带 name 属性的控件。弹窗里动态生成的 <input>、<textarea></textarea>、<select></select> 若漏设 name，哪怕有 id="email" 或 data-field="email"，FormData 也返回空对象。
实操建议：
- 静态弹窗 HTML 中，每个控件必须显式写
name：<input name="username">✅，<input id="username">❌ - JS 动态插入时，在 append 到 DOM 前就赋值：
const input = document.createElement('input'); input.name = 'phone'; form.appendChild(input); - 快速验证：提交前加一句
console.log([...new FormData(form)]);，输出应为二维数组，如[["title", "测试"], ["status", "active"]] - 编辑弹窗场景下，回填数据时别只改
value，也要确保name和后端字段名一致，否则提交字段名对不上
按钮点击没反应？别让type="submit"抢了控制权
弹窗内放一个 <button></button>，如果没声明 type，浏览器默认按 type="submit" 处理。一旦它被包裹在 <form></form> 里，点击就会触发原生表单提交——页面刷新或跳转，你的 JS 逻辑根本没机会执行。
解决方式分两种场景：
- 按钮本意就是提交表单 → 绑定
form的submit事件，并在回调开头加event.preventDefault()；同时用e.submitter区分是哪个按钮触发的（需注意 IE 不支持） - 按钮只是“确认”“取消”等非提交操作 → 显式设
<button type="button"></button>，从根源上剥离默认行为，避免意外提交 - 用
<dialog></dialog>时更要注意：若弹窗内部也有<form></form>，而按钮没设type，它会优先提交这个内部表单，而不是你期望的主表单
最易忽略的一点：用 onclick="handleClick()" 内联写法时，没法直接访问 event 对象，preventDefault() 很容易被漏掉。统一用 addEventListener 更可控。
