表单提交需设 method="dialog"，点击 submit 按钮自动关闭并赋值 dialog.returnValue；否则静默失败。需监听 close 事件读取返回值，手动重置表单，并为旧浏览器降级为语义化 。

表单提交不是靠 form.submit() 触发页面跳转，而是靠 form[method="dialog"] + dialog.close() 配合实现——提交即关闭，且返回值可捕获。用错方式会导致表单静默失败、遮罩不生效、键盘焦点失控。

dialog 中 form 必须设 method="dialog"

原生

不认 method="post" 或 method="get"。只要没写 method="dialog"，点击按钮后对话框不会关闭，dialog.returnValue 也不会被赋值，后续 JS 拿不到用户选择。

• 正确写法：
  确定
• 错误写法：
  ...
  （此时 submit 会尝试跳转或刷新页面）
• 如果需要异步提交（如发 AJAX），就不能依赖 method="dialog" 的自动关闭逻辑，得手动调用 dialog.close(result)

showModal() 后必须处理 dialog.returnValue

用户点击 type="submit" 的按钮后，

自动关闭，但它的返回值只存在 dialog.returnValue 属性里，不会自动传给回调函数或事件参数。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 监听 close 事件才能拿到结果：dialog.addEventListener('close', () => console.log(dialog.returnValue))
• 按钮的 value 属性决定 returnValue 值（如 取消 → dialog.returnValue === "cancel"）
• 若按钮没设 value，returnValue 是空字符串，容易误判

dialog 提交后无法自动清空表单？

关闭后 DOM 还在，表单字段值不会重置。下次打开时显示上次输入内容，对多轮操作极不友好。

• 推荐在 close 事件里手动重置：dialog.addEventListener('close', () => form.reset())
• 别用 form.innerHTML = form.outerHTML，会丢失事件绑定和 focus 状态
• 如果用了 autofocus，重置后需再调一次 input.focus()，否则首次打开无焦点

IE 和旧版 Safari 不支持 dialog，fallback 怎么做？

在 Safari 15.4+、Chrome 37+、Firefox 98+ 才稳定支持；IE 完全不支持。检测不到时，必须降级为

+ 手动管理焦点和遮罩。

• 检测方式：if (!('showModal' in HTMLDialogElement.prototype)) { /* 降级逻辑 */ }
• 关键 fallback 行为：禁用背景滚动、tab 键焦点限制、Esc 关闭、aria-modal="true"
• 不要只加 CSS 显示隐藏——那只是“看起来像”，不是语义化对话框，屏幕阅读器无法识别

最易被忽略的是 dialog.returnValue 的读取时机：它只在 close 事件触发后有效，且只能读一次；在 showModal() 调用后立刻读是 undefined。别把它当 Promise 返回值用。

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