
当用户点击音频播放器(如播放/暂停按钮)导致 textarea 失去焦点时,可通过监听音频元素的 focus 事件并主动调用 textarea.focus() 实现焦点自动回归。
在 HTML 表单中嵌入
直接为 document.body 绑定 click 事件并统一聚焦 textarea 的方案不可靠,原因在于:
- 音频控件内部的原生 UI(如 Chrome 的播放按钮)通常不触发页面级 click 事件冒泡;
- 某些操作(如拖动音量滑块)甚至可能不触发 click,而仅触发 focus 或 input 类事件;
- 全局 click 监听还可能干扰其他表单控件的正常交互。
✅ 正确做法是:监听音频元素自身的 focus 事件。现代浏览器中,当用户通过鼠标或键盘激活音频控件(例如点击播放按钮、按空格键播放、Tab 切入控件)时,
示例代码如下:
<audio id="audio-player"
controlsList="nodownload"
controls
src="1294.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>
<script>
const textarea = document.getElementById("input_tr");
const audio = document.getElementById("audio-player");
// ✅ 监听 audio 元素获得焦点时,立即将焦点交还给 textarea
audio.addEventListener("focus", () => {
// 延迟执行确保 DOM 状态稳定(可选,但推荐)
setTimeout(() => textarea.focus(), 0);
});
// ? 可选增强:当用户用 Tab 键离开 audio 后再次进入时也生效
// (focus 事件天然覆盖所有获取焦点途径,包括鼠标点击和键盘导航)
</script>⚠️ 注意事项:
- autofocus 属性仅在页面加载时生效,无法解决后续失焦问题,因此必须配合事件监听;
- setTimeout(..., 0) 是良好实践,避免因浏览器焦点调度时序问题导致 focus 被覆盖;
- 若需兼容老旧浏览器(如 IE),可补充监听 mousedown 事件并阻止默认行为后手动聚焦,但当前方案在 Chrome/Firefox/Safari/Edge 中均稳定有效;
- 不建议使用 blur 事件反向监听(如 audio.addEventListener('blur', ...)),因为 blur 发生时焦点可能已移至不可知元素,难以精准捕获“刚离开 audio”的时机。
通过聚焦音频元素再回调 textarea 的方式,既轻量又精准,是实现「听写即写」工作流的理想解决方案。










