
当用户点击音频控件(如播放、暂停)导致文本框失焦时,可通过监听音频元素的 focus 事件,主动将焦点重新交还给 textarea,确保输入体验连续流畅。
在 HTML 表单中嵌入
更准确、轻量且语义正确的做法是:监听音频元素自身的 focus 事件。当音频控件获得焦点(无论是鼠标点击、Tab 导航还是其他方式),立即触发 textarea 重新聚焦:
⚠️ 注意事项:
- 音频元素默认不可聚焦(tabindex = -1),但现代浏览器在启用 controls 属性后,会自动赋予其可聚焦能力(表现为点击控件时 outline 出现)。因此 focus 事件可被可靠捕获。
- 若需兼容旧版 Safari 或特殊环境,可显式添加 tabindex="0" 到
- 不建议使用 blur 事件反向监听(如监听 textarea 的 blur),因其无法区分失焦来源(可能是用户主动切走,也可能是音频触发),易造成误恢复。
- setTimeout(..., 0) 是防御性写法,避免因事件执行顺序导致 focus 被覆盖;多数场景下可省略,但推荐保留以提升鲁棒性。
此方案精准、低侵入、符合 Web 标准,能有效维持用户在“听音—记录”工作流中的输入连续性。











