移动端表单自定义校验气泡需位置精准、触发稳定、样式融合：用getBoundingClientRect计算视口坐标并修正滚动偏移，禁用原生提示，轻量浮层库或纯CSS实现自动避让与方向微调，同步视觉反馈与可访问性支持。
移动端表单用气泡浮层展示自定义校验错误，核心是“位置准、触发稳、样式融”。不能依赖浏览器默认提示（太丑且不可控），也不能硬写绝对定位（适配差、易遮挡）。真正优雅的做法，是结合元素真实坐标 + 轻量级浮层库 + 状态联动。
用 getBoundingClientRect 精确计算气泡锚点
移动端滚动、缩放、transform 布局很常见，offsetTop/Left 容易失真。必须用 elem.getBoundingClientRect() 获取输入框相对于视口的实时坐标，再结合滚动偏移修正：
- 调用
rect = inputEl.getBoundingClientRect() - 真实文档坐标 =
{ x: rect.left + window.pageXOffset, y: rect.top + window.pageYOffset } - 气泡上沿建议放在
y - 10（略高于输入框），箭头指向输入框中点
禁用默认提示，接管显示逻辑
HTML5 的 setCustomValidity() + reportValidity() 会弹原生气泡，在 iOS 上样式割裂、位置固定、无法定制。应主动拦截：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 在 blur 或 submit 时调用
input.setCustomValidity('')清空状态 - 手动校验，失败时不调
reportValidity()，改走自定义浮层 - 若用框架（如 Ant Design Mobile、cube-ui），关闭其
help或validateTrigger的自动提示
选轻量浮层，支持方向微调与自动避让
避免引入完整 UI 库只为一个气泡。推荐两种方式：
-
layer.tips（Layui）：传
{ tips: [2, '#f00'], tipsOffset: 8 }控制朝上+微调，配合success回调修正 DOM 样式 -
纯 CSS + JS：用
position: fixed气泡，通过transform: translate(-50%, 0)居中，用max-width: 80vw防溢出，加pointer-events: none避免遮挡输入
保持视觉一致性与可访问性
气泡不是装饰，是错误信息载体：
- 颜色用品牌主色或警示红，字号不小于 14px，行高 1.4，确保小屏可读
- 气泡出现时，同步给输入框加
border-color: #f00和box-shadow: 0 0 6px rgba(255,0,0,0.2) - 用
aria-live="assertive"包裹气泡文案，让读屏器立刻播报 - 用户再次输入时，气泡需自动消失（监听
input事件并隐藏）
