dialog本身不提供表单重置能力，需在close事件中手动调用form.reset()并额外清空file、富文本等非原生控件，且reset()仅还原html初始值，js动态赋值需确保在dom就绪后设置以避免重置失效。

dialog 本身不提供表单重置能力，form.reset() 也不会自动清空 dialog 内容——它只作用于 form 元素自身。真正要解决“打开弹窗 → 填写表单 → 提交/关闭 → 下次打开还是干净状态”，得把重置逻辑拆成两步：关闭时清理，打开前确保初始值正确。

dialog 关闭后必须手动重置表单，不能依赖 open 属性切换

很多人以为给 <dialog open></dialog> 加个 open 属性就能“显示旧内容”，其实这是错觉：open 只控制可见性，不恢复表单状态。关闭 dialog 后，input.value、textarea.value、select.selectedIndex 都还留着上次的值。

• 关闭时调用 form.reset() 是最直接方式，但要注意时机：必须在 close 事件里执行，而不是 click 或按钮 onclick
• form.reset() 只还原 HTML 初始值（如 <input value="默认">），JS 动态设的值不会被覆盖——所以别在 showModal() 前用 JS 改 value，否则 reset() 无效
• 对 <input type="file">，reset() 完全无效，必须额外加 fileInput.value = ''
• 如果表单里有富文本编辑器或日期选择器（如 Flatpickr），它们的实例状态不会被 reset() 影响，得单独调用其 API 清空

用 method="dialog" 提交后自动 close，但重置仍需自己做

method="dialog" 确实能让 <form></form> 在提交后自动触发 dialog.close() 并设置 dialog.returnValue，但它**不会触发 form.reset()**。页面刷新没发生，但输入框里的文字还在。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 提交成功后，dialog 关闭了，但表单 DOM 没变——下次再 showModal()，用户看到的还是上一次填的内容
• 正确做法是在 dialog.addEventListener('close', ...) 里调用 form.reset()，并手动清空 file、富文本等非原生控件
• 如果用了 fetch 异步提交，记得在 .then() 里调 dialog.close()，再在 close 事件中统一重置，避免重复或遗漏
• 不要在 submit 事件里直接 form.reset()，尤其当表单含 file 或需要服务端校验时，容易丢数据

type="reset" 按钮在 dialog 里能用，但行为受限

<button type="reset"></button> 在 dialog 内部是合法的，点击会触发 form.reset() 和 reset 事件，但它只还原 HTML 初始值，且对某些控件无效。

• <input type="date">、<input type="time"> 重置后显示为空白，不是初始 value —— 这是规范行为，别指望它回填
• <textarea>初始内容</textarea> 重置后显示“初始内容”，但如果 JS 曾执行过 el.textContent = '新内容'，reset() 不会还原
• 现代项目中更推荐用 type="button" + 手动清空逻辑：遍历 form.elements，按类型分别设 .value、.checked、.selectedIndex，再同步框架状态
• 如果用了 onreset 监听，注意它在 Safari 旧版本中可能不触发，建议始终用 addEventListener('reset', ...) 兜底

dialog 打开前检查 autofocus 和初始聚焦

即使表单已重置，dialog.showModal() 默认聚焦第一个可聚焦子元素，但如果那个元素是 disabled 或 hidden，焦点可能落到背景页，导致键盘操作失效。

• 确保重置后第一个 input 是 enabled 且未被 display: none 或 visibility: hidden 隐藏
• 显式加 autofocus 属性比依赖默认行为更可靠：<input autofocus>
• 如果重置逻辑包含动态增删字段（比如条件表单项），要在 showModal() 前确保 DOM 已就绪，否则 autofocus 可能失效
• Safari 15.4–16.3 对 dialog 的焦点管理有 bug，有时 autofocus 不生效，可 fallback 到 input.focus() 手动聚焦

最关键的细节往往藏在“关闭后”和“打开前”之间：重置不是一次性的动作，而是连接两次弹窗的桥梁。漏掉 file 输入框、忽略日期控件的空白行为、或者把重置逻辑绑在错误的事件上，都会让“干净打开”变成幻觉。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！