form[method="dialog"]仅触发dialog.close()而不自动返回表单数据，需手动监听submit、preventdefault、序列化数据并显式调用dialog.close(value)，再通过await dialog.closed获取返回值。
form method="dialog" 不能直接提交返回值
HTML 原生 form[method="dialog"] 只是配合 <dialog></dialog> 元素做 UI 行为控制，它本身不提供“返回值”机制——提交后会关闭 <dialog></dialog>，但不会像 showModal() 的 Promise 那样 resolve 数据。
常见误解是以为写 <form method="dialog"></form> 就能自动把表单字段变成返回值，实际它只等价于调用 dialog.close()，且传入的参数（如 dialog.close("ok")）必须手动触发，不能由 form 自动提取。
-
method="dialog"的作用仅限：点击 submit 按钮时，阻止默认提交，调用dialog.close() - 它不读取
<input>、不序列化数据、不触发任何回调或 Promise resolve - 若未包裹在
<dialog></dialog>中，该属性会被浏览器忽略（无报错，也无效果）
正确获取表单数据并关闭 dialog 的做法
必须手动监听 submit 事件，阻止默认行为，收集数据，再显式调用 dialog.close() 并传参。这是唯一可靠路径。
示例关键片段：
<dialog id="myDialog"><form id="myForm">
<input name="username" required><button type="submit">确认</button>
</form>
</dialog><script>
const dialog = document.getElementById("myDialog");
const form = document.getElementById("myForm");
dialog.showModal();
form.addEventListener("submit", (e) => {
e.preventDefault();
const data = Object.fromEntries(new FormData(form));
dialog.close(JSON.stringify(data)); // ← 手动 close 并传值
});
</script>
- 务必用
e.preventDefault()，否则method="dialog"会抢在你之前调用close()（不带参数） -
dialog.close()的参数只能是字符串，如需结构化数据，得自己JSON.stringify()和后续JSON.parse() - 注意：Chrome 125+ 支持
dialog.returnValue，但它是只读属性，仅反映上次close()传入的字符串，不能用于“返回”
如何在打开方拿到关闭时传回的值
调用 dialog.showModal() 会返回一个 Promise，resolve 值就是 dialog.close(value) 中的 value（字符串）。
所以打开和关闭必须配对使用 Promise 语法：
async function openDialog() {
const dialog = document.getElementById("myDialog");
dialog.showModal(); // ← 这里不能用 show()，必须用 showModal()
try {
const result = await dialog.closed; // ← 等待关闭，result 是 close() 的参数
console.log(JSON.parse(result)); // { username: "alice" }
} catch (e) {
// 用户按 Esc 或点击 backdrop 关闭时，dialog.closed 仍会 resolve，但 result 是空字符串
// 需自行判断 result 是否有效
}
}
-
dialog.closed是 Promise，不是事件；showModal()是前提，show()不会触发它 - 用户主动关闭（Esc / backdrop click）时，
result是空字符串""，不是undefined或null - 不要依赖
dialog.returnValue做逻辑分支——它只是历史快照，无法区分“用户取消”和“未 close”
兼容性与容易被忽略的细节
<dialog></dialog> 本身在 Safari 上支持较晚（15.4+），且 dialog.closed Promise 在 Safari 16.4+ 才可用；method="dialog" 属性所有支持 dialog 的浏览器都认，但行为一致的前提是：form 必须是 dialog 的子元素。
- 如果 form 在 dialog 外部，
method="dialog"完全无效，提交仍会跳转或刷新页面 - 多个 submit 按钮？每个都要
preventDefault()，或统一在 form submit 上处理 - 服务端渲染场景下，别忘了初始化时检查
dialog.open状态，避免重复showModal()报错 - 移动端 keyboard 弹出可能遮挡 dialog 底部按钮，这不是
method="dialog"的问题，但常被误认为“提交没反应”
真正要返回值，就得亲手抓数据、亲手 close、亲手 await closed——没有捷径，也没有隐式绑定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
