dialog 元素不自动收集表单数据，需手动绑定事件并读取子元素值；触发按钮应设 type="button" 或阻止默认行为；关闭后需主动清空或初始化 input 值。
dialog 元素本身不自动收集或传递表单数据，必须手动绑定事件并读取子元素值 —— 这是绝大多数人卡住的第一步。
dialog 打开后无法获取 input 值？检查是否漏了 event.preventDefault()
点击 <button> 触发 showModal() 时，若该按钮在表单内且未阻止默认行为，页面可能意外提交或刷新，导致 input 值丢失或 DOM 重置。
- 确保触发按钮不在
<form>内，或显式添加type="button" - 若用
<form>包裹 dialog 内容，submit 事件需event.preventDefault()，再手动提取数据 - dialog 关闭后 DOM 仍存在，input 值不会自动清空 —— 需要你主动处理
如何监听 dialog 关闭并读取用户输入？
不能依赖 close 事件直接拿值（此时 input 可能还没失焦），应在确认按钮点击时立即读取，或在 close 事件中同步抓取。
<dialog id="myDialog">
<form method="dialog">
<input type="text" id="userName" placeholder="请输入姓名">
<button type="submit">确定</button>
<button type="button" onclick="this.closest('dialog').close()">取消</button>
</form>
</dialog>
<p><script>
const dialog = document.getElementById('myDialog');
const confirmBtn = dialog.querySelector('button[type="submit"]');</p><p>confirmBtn.addEventListener('click', (e) => {
e.preventDefault(); // 阻止 form 默认提交
const name = document.getElementById('userName').value.trim();
if (name) {
console.log('用户输入：', name); // ✅ 此处拿到数据
}
dialog.close();
});</p><p>// 或监听 close 事件（注意：仅适用于用户点 backdrop/ESC/取消按钮）
dialog.addEventListener('close', () => {
if (dialog.returnValue === 'confirm') {
const name = document.getElementById('userName').value;
console.log('通过 returnValue 标识的确认操作：', name);
}
});
</script>dialog.returnValue 的作用和常见误用
returnValue 是 dialog 的可写属性，用于在关闭时携带一个字符串标识（如 'confirm'、'cancel'），但它**不包含表单数据**，只用于区分关闭路径。
batch-git-url-replace
下载
批量替换指定目录下所有 Git 仓库的远程地址（remote URL）。 当用户需要将 Git 仓库从一个服务器迁移到另一个服务器时使用。 触发词：git remote 替换、git url 批量修改、git 仓库迁移、更换 git 地址、批量修改 remote url。
立即学习“前端免费学习笔记（深入）”；
- 调用
dialog.close('confirm')后，dialog.returnValue才是'confirm' - 点击 backdrop 或按 ESC 关闭时，
returnValue为空字符串，不可靠作为数据依据 - 不要试图把对象或 JSON 字符串赋给
returnValue—— 它只接受字符串，且长度无保障 - 真正要传的数据，始终得从 input/select/textarea 等元素上
.value或.checked拿
兼容性与 polyfill 注意点
Firefox 98+、Chrome 97+、Edge 97+ 原生支持 <dialog>；Safari 目前（2024）仍不支持，必须用 polyfill（如 @github/details-dialog）或降级方案。
- polyfill 通常不完全模拟
returnValue行为，建议统一用自定义事件或回调函数传递数据 - 原生 dialog 的
showModal()会阻塞后续 JS 执行，但**不阻塞用户对其他 tab 的操作** —— 别指望它像 alert() 那样“暂停整个浏览器” - 若需跨浏览器稳定取值，推荐封装一个函数：
getDialogData(dialogEl)，内部遍历dialogEl.querySelectorAll('input, select, textarea')统一收集
真正麻烦的不是怎么取值，而是忘记 dialog 关闭后 input 还在 DOM 里躺着 —— 下次再打开时，上次的脏数据还在那里，而你没做初始化。
