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

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

在 HTML 表单中嵌入 元素时，浏览器默认会将焦点转移到音频控件（尤其在点击播放/暂停/进度条等可交互区域时），导致原本聚焦的 失去焦点——这会打断用户正在输入的内容，影响操作流畅性。直接监听 document.body 的 click 事件并强制聚焦 textarea 并不可靠，因为音频控件内部部分区域（如控制按钮）本身<strong>不触发 click 事件冒泡</strong>，且某些行为（如空格键播放）甚至不产生点击。

✅ 正确做法是：监听音频元素自身的 focus 事件（而非 click），并在回调中调用 textarea.focus()。该事件会在音频控件获得焦点时可靠触发（包括鼠标点击、Tab 导航进入、键盘操作激活等场景）：

  Your browser does not support the audio element.



  
  
  OK

const textarea = document.getElementById("input_tr");
const audioPlayer = document.getElementById("audio-player");

// 监听音频元素获得焦点时，立即将焦点交还给 textarea
audioPlayer.addEventListener("focus", () => {
  // 延迟执行确保 DOM 状态稳定（可选
，但推荐用于兼容性）
  setTimeout(() => textarea.focus(), 0);
});

⚠️ 注意事项：

• 音频元素默认不可聚焦（tabindex 为 -1），但现代浏览器在启用 controls 属性后会自动赋予其可聚焦能力；若仍不触发 focus 事件，可显式添加 tabindex="0"：

• 若页面存在多个可聚焦元素，建议结合 blur 事件做更精细控制（例如仅在 textarea 失焦且焦点落入音频控件时才响应）；
• setTimeout(..., 0) 可避免因事件执行时机导致的焦点竞争问题，提升跨浏览器稳定性。

通过该方案，用户无论点击播放按钮、拖动进度条，还是使用空格/Enter 键控制音频，焦点都会无缝回归至文本域，真正实现“所见即所写”的沉浸式输入体验。