
当用户点击音频播放器(如播放/暂停按钮)导致文本域失焦时,可通过监听音频元素的 focus 事件,主动将焦点重新交还给 textarea,确保输入体验连续不中断。
在 Web 表单中,
✅ 正确解法是:显式设置
Your browser does not support the audio element.
然后绑定事件处理器:
const textarea = document.getElementById("input_tr");
const audioPlayer = document.querySelector("#audio-player");
// 监听 audio 元素获得焦点(包括用户点击控制条触发)
audioPlayer.addEventListener("focus", () => {
// 延迟执行,避免与浏览器默认行为冲突(如 timeline 拖拽时短暂失焦又重获)
setTimeout(() => textarea.focus(), 0);
});⚠️ 注意事项:
-
必须添加 tabindex="0":这是关键前提,否则多数浏览器不会触发
的 focus 事件; - 使用 setTimeout(..., 0):防止在某些交互(如拖动进度条)中因浏览器同步聚焦逻辑导致 textarea 焦点被立即覆盖;
- 避免监听 click 或 mousedown:这些事件在音频控制区域上可能被浏览器拦截或不冒泡,可靠性远低于 focus;
- 若需兼容旧版 Safari(
总结:聚焦管理应基于「焦点流」而非「点击流」。音频控件本质是焦点敏感组件,通过标准化的 focus 事件配合 tabindex 控制,即可优雅实现焦点自动回归,显著提升表单填写效率与无障碍访问体验。










