如何让音频控件操作后自动恢复文本域焦点

当用户点击音频播放器（如播放/暂停按钮）导致文本域失焦时，可通过监听音频元素的 focus 事件，主动将焦点重新交还给 textarea，确保输入体验连续不中断。

在 Web 表单中，

✅ 正确解法是：显式设置 。虽然

然后绑定事件处理器：

const textarea = document.getElementById("input_tr"); const audioPlayer = document.querySelector("#audio-player");  // 监听 audio 元素获得焦点（包括用户点击控制条触发） audioPlayer.addEventListener("focus", () => {   // 延迟执行，避免与浏览器默认行为冲突（如 timeline 拖拽时短暂失焦又重获）   setTimeout(() => textarea.focus(), 0); });

⚠️ 注意事项：

• 必须添加 tabindex=”0″：这是关键前提，否则多数浏览器不会触发
• 使用 setTimeout(…, 0)：防止在某些交互（如拖动进度条）中因浏览器同步聚焦逻辑导致 textarea 焦点被立即覆盖；
• 避免监听 click 或 mousedown：这些事件在音频控制区域上可能被浏览器拦截或不冒泡，可靠性远低于 focus；
• 若需兼容旧版 safari（

总结：聚焦管理应基于「焦点流」而非「点击流」。音频控件本质是焦点敏感组件，通过标准化的 focus 事件配合 tabindex 控制，即可优雅实现焦点自动回归，显著提升表单填写效率与无障碍访问体验。