本文介绍如何通过监听音频元素的 focus 事件，实现在用户点击播放、暂停或拖动进度条等操作后，自动将页面焦点重新移回指定 <textarea>，解决原生 audio 控件失焦导致输入中断的问题。
本文介绍如何通过监听音频元素的 focus 事件，实现在用户点击播放、暂停或拖动进度条等操作后，自动将页面焦点重新移回指定 `
在构建音视频标注、听写或语音反馈类 Web 应用时，常需让用户边听音频边实时输入文字。此时若 <audio> 元素获得焦点（例如用户点击播放/暂停按钮、拖动时间轴、聚焦控制条），浏览器会默认将焦点从 <textarea> 移出，导致后续输入需手动点击文本域才能继续——严重影响交互效率。
根本原因在于：<audio> 元素虽默认不可聚焦，但启用 controls 属性后，其内部控件（尤其是可交互区域）在部分浏览器中会触发隐式焦点行为；而 click 事件监听 document.body 的方案失效，是因为音频控件的点击并不总触发 body 的冒泡点击（如某些控件使用 Shadow DOM 或事件拦截），且可能在焦点已转移后再触发，造成 focus() 调用无效或被覆盖。
✅ 正确解法是监听音频元素自身的 focus 事件——当用户与音频控件交互导致 <audio> 获得焦点时，立即主动将焦点交还给目标 <textarea>：
<audio id="audio-player"
controlsList="nodownload"
controls
src="https://github.com/prof3ssorSt3v3/media-sample-files/raw/master/jimmy-coffee.wav"
oncontextmenu="return false;"
onkeydown="return false;">
Your browser does not support the audio element.
</audio>
<form>
<input type="hidden" name="sysid" id="sysid-field">
<textarea name="status" id="input_tr" autofocus></textarea>
<button type="submit" value="ok">OK</button>
</form>const textarea = document.getElementById("input_tr");
const audioPlayer = document.querySelector("#audio-player");
// 监听 audio 元素获得焦点时，立即将焦点切回 textarea
audioPlayer.addEventListener("focus", () => {
// 延迟执行确保焦点切换可靠（尤其在 Safari 中）
setTimeout(() => textarea.focus(), 0);
});? 关键注意事项：
- focus 事件仅在 <audio> 实际获得焦点时触发（现代 Chromium/Firefox/Safari 均支持），比 click 更精准；
- 添加 setTimeout(..., 0) 是重要实践：避免因浏览器焦点调度时序问题导致 focus() 被忽略（尤其在 Safari 中表现明显）；
- 若需兼容更旧环境，可补充监听 blur 事件（当 <audio> 失焦时判断是否应恢复 textarea 焦点），但 focus 方案已覆盖绝大多数场景；
- 请勿移除 autofocus 属性——它确保页面加载后初始焦点正确，与后续逻辑互补而非冲突。
该方案轻量、语义清晰、无侵入性，能显著提升多模态表单的输入连续性与用户体验。
