关闭dialog时表单未清空，需监听close事件并调用form.reset()或手动重置input值；reset()仅还原初始value/checked，动态赋值应同步更新defaultValue或写入HTML。
关闭 dialog 时表单内容没清空，怎么办
直接调用 dialog.close() 不会重置内部表单，这是常见误解。浏览器不会自动清理 <form> 或独立 <input> 的值——它只控制显示状态。
推荐做法：监听 close 事件并手动重置
<dialog> 关闭时触发 close 事件（注意不是 closed），这是最可靠时机。别用 click outside 或按钮 onclick 模拟，容易漏掉 ESC 关闭或点击 backdrop 的场景。
实操建议：
- 给
<dialog>绑定addEventListener('close', ...) - 优先对整个
<form>调用.reset()—— 它会还原所有控件到初始value或defaultValue - 若 dialog 内无
<form>，需遍历querySelectorAll('input, textarea, select')并逐个设.value = ''（注意checkbox/radio还需处理checked）
示例：
立即学习“前端免费学习笔记（深入）”；
<dialog id="myDialog">
<form id="myForm">
<input name="username" value="old">
<button type="submit">提交</button>
</form>
<button id="closeBtn">关闭</button>
</dialog>
<script>
const dialog = document.getElementById('myDialog');
const form = document.getElementById('myForm');
dialog.addEventListener('close', () => {
form.reset(); // ✅ 清除输入，还原 placeholder/initial value
});
// closeBtn.click() 或 ESC 都会触发上面的 reset
</script>
reset() 为什么有时不生效
.reset() 只还原到元素的「初始值」，即 HTML 中写的 value="xxx"、checked 属性，或 JS 设置过的 defaultValue/defaultChecked。如果初始没写 value，它就清成空字符串；但如果用 JS 动态改过 input.value 却没同步更新 defaultValue，reset() 就会失效。
排查要点：
- 检查 input 是否有硬编码的
value属性（如<input value="默认">），没有则reset()后为空 - 避免在打开 dialog 前用
input.value = 'xxx'赋值，应改用input.defaultValue = 'xxx'或直接写进 HTML -
textarea的初始内容是标签体文本（<textarea>初始</textarea>），不是value属性
用 showModal() 打开时要不要提前清空
不需要。提前清空反而可能干扰用户连续操作（比如编辑后取消，下次打开还希望保留上次输入）。正确节奏是：打开时不干预 → 用户操作 → 关闭时统一重置。
唯一例外：某些场景要求每次打开都是“全新表单”，那就把 form.reset() 放在 dialog.showModal() 之前，但务必确保它不覆盖用户尚未提交的中间状态。
真正容易被忽略的是：dialog 元素本身可能被反复复用（比如同一个 DOM 节点多次 showModal()），它的子节点不会自动销毁，所以重置逻辑必须稳定执行，不能只依赖一次初始化。
