dialog标签仅是语义化容器，搜索功能需手动实现聚焦、回车触发、遮罩关闭、可访问性等；Safari存在autofocus失效、输入框错位、returnValue为空等问题，须针对性处理。
dialog 标签本身不支持“搜索弹窗”这种功能定位——它只是个语义化容器，搜索逻辑、输入聚焦、结果渲染、键盘导航都得你手写。别指望调用 showModal() 就自动带搜索框和下拉列表。
为什么直接写 <dialog><input type="search"></dialog> 不行
常见错误现象：弹窗打开后光标没自动进输入框、按回车没反应、点击遮罩关不掉、Safari 里输入框失焦或错位。
-
showModal()会尝试聚焦第一个可聚焦子元素，但<input type="search">在 Safari 中可能被忽略（尤其嵌套在<form>或有display: contents父级时） - 父容器若含
transform、will-change或overflow: hidden，会导致输入框渲染异常或光标偏移（Safari 17.6 仍存在） - 原生
dialog不监听Enter键，必须手动addEventListener('keydown', e => e.key === 'Enter' && runSearch()) - 没加
autofocus属性，或加了但被 JS 覆盖（比如先调showModal()再focus()，时机不对）
如何让搜索输入框在 dialog 中真正可用
核心是三件事：聚焦可控、回车可触发、键盘导航不跳出。
- 给
<input>加autofocus属性，但必须配合showModal()后的强制聚焦（因 Safari 对autofocus支持不稳定）：dialog.showModal();<br>dialog.querySelector('input').focus(); - 监听
keydown，捕获Enter和Escape：input.addEventListener('keydown', e => {<br> if (e.key === 'Enter') { e.preventDefault(); doSearch(input.value); }<br> if (e.key === 'Escape') { dialog.close(); }<br>}); - 禁用默认表单提交行为：如果包在
<form method="dialog">里，Enter会直接关闭弹窗且清空returnValue—— 这不是你要的搜索 - 移动端需加
inputmode="search"和spellcheck="false"，避免 iOS 键盘弹出无关建议
点击遮罩关闭 + 搜索结果滚动兼容写法
Chrome/Edge 120+ 可靠用 e.target === dialog 判断点击遮罩；Safari 不行，必须降级坐标判断。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 不要写
dialog::backdrop { cursor: pointer }—— 伪元素不可交互，加了也没用 - 安全写法：监听
click后检查点击位置是否在弹窗边界外：dialog.addEventListener('click', e => {<br> const rect = dialog.getBoundingClientRect();<br> if (e.clientX < rect.left || e.clientX > rect.right ||<br> e.clientY < rect.top || e.clientY > rect.bottom) {<br> dialog.close();<br> }<br>}); - 搜索结果列表若用
<ul>渲染，记得设max-height: 300px; overflow-y: auto;，否则在小屏上溢出不可滚动（dialog默认不处理内部滚动） - 别在结果项里用
position: fixed—— Safari 渲染层 bug 会导致选项悬浮错位
搜索弹窗的焦点回收与可访问性补漏
关闭后焦点不回按钮，屏幕阅读器读不到状态变化，这两点线上项目常被忽略。
- 必须监听
close事件，而非只绑关闭按钮的click：dialog.addEventListener('close', () => {<br> triggerBtn.focus(); // 触发按钮必须可聚焦（加 tabindex="0"）<br> triggerBtn.setAttribute('aria-expanded', 'false');<br>}); - 打开前给
<body>加inert属性（现代浏览器），旧版 fallback 用aria-hidden="true"+ 手动tabindex="-1"锁背景焦点 -
dialog.returnValue在 Safari 中始终为空字符串，别用它传搜索关键词 —— 改用闭包变量或自定义事件 - 搜索中状态要暴露：
dialog.setAttribute('aria-busy', 'true')，完成后再设'false'
最易被忽略的点：Safari 中 dialog 的 open 属性在关闭后不会自动从 DOM 移除，但 getBoundingClientRect() 可能返回无效值，导致坐标判断失效。每次打开前最好先 dialog.removeAttribute('open') 再 showModal()，确保尺寸计算准确。
