纯 HTML 无法实现举报弹窗,必须用 JavaScript 调用 showModal();推荐用 + 单选 + type="submit" 表单 + fetch() 提交 + dialog.close() 关闭 + 焦点管理防点透。

怎么用 HTML 实现举报弹窗(不依赖 JS)?
纯 HTML 无法触发弹窗交互,dialog 元素必须配合 JavaScript 的 showModal() 或 show() 才能显示。常见错误是只写 <dialog></dialog> 标签却不调用方法,结果页面完全没反应。
- 必须用
<button onclick="document.getElementById('reportDialog').showModal()"></button>这类内联 JS 或外部脚本驱动 -
dialog在 Safari 15.4+、Chrome 98+、Firefox 97+ 支持,旧版需降级为<div> + CSS 模拟 <li>不要给 <code>dialog设display: none—— 它默认就是隐藏的,强行设会破坏可访问性 - name 属性要统一(如
name="report_type"),否则浏览器不会互斥 - 推荐值用语义化英文(
"copyright"、"spam"、"harassment"),别用中文或空格,避免后端解析失败
举报类型怎么用单选按钮组织?
用 <fieldset></fieldset> 包裹一组 <input type="radio">,语义正确且方便聚焦导航。别用 <div> 堆 checkbox,举报是单选场景,多选反而导致后端校验混乱。<ul>
<li>每个 <code>input 必须有唯一 id 和对应 <label for="xxx"></label>,否则屏幕阅读器无法识别
提交举报时为什么表单总被忽略?
举报弹窗里如果直接放 <form></form>,但没处理 submit 事件,默认会刷新页面,导致弹窗关闭、数据丢失。更隐蔽的问题是:用户点了“确定”按钮却没绑定任何逻辑。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 按钮类型必须是
type="submit"(不是button),且在form内部,否则触发型 submit 事件无效 - 用
event.preventDefault()拦住默认提交,再用fetch()发送数据到后端接口 - 弹窗关闭应放在请求成功回调里:
dialog.close(),而不是点击就关——万一网络失败,用户得重填一遍
移动端点透和焦点丢失怎么防?
在 iOS Safari 上,dialog 弹出后点背景常触发下层按钮,或者首次点击 radio 没响应,本质是焦点没落到可交互元素上。
- 弹窗打开后立即用
dialog.querySelector('input[type="radio"]').focus()把焦点设到第一个选项 - 给
dialog加inert属性(或用 JS 动态加)可禁用背景交互,但注意兼容性:Firefox 不支持inert,得用pointer-events: none+ class 切换 - 避免在
dialog内用position: fixed的遮罩层——它会干扰原生 dialog 的 focus 管理
事情说清了就结束










