如何在点击HTML音频播放器后将焦点切回textarea？

问题原因 #

你之前给document.body绑定点击事件无效，是因为浏览器对原生音频控件的点击事件有特殊处理——部分操作（比如点击播放/暂停按钮）会阻止事件冒泡到body，或是在事件处理完成后重新获取焦点，导致你的focus()被覆盖。

解决方案 #

直接给音频播放器元素绑定点击事件，同时通过延迟执行确保焦点能正确切换到文本域；额外监听音频的播放/暂停事件，覆盖更多触发场景：

修改后的JavaScript代码 #

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

// 监听音频播放器的点击事件
audioPlayer.addEventListener("click", () => {
    // 延迟执行避免浏览器默认焦点行为覆盖
    setTimeout(() => {
        textarea.focus();
    }, 10);
});

// 监听播放/暂停状态切换，确保焦点切回
audioPlayer.addEventListener("play", () => textarea.focus());
audioPlayer.addEventListener("pause", () => textarea.focus());

完整可运行代码示例 #

<body>
<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 audioPlayer = document.getElementById("audio-player");

audioPlayer.addEventListener("click", () => {
    setTimeout(() => {
        textarea.focus();
    }, 10);
});

audioPlayer.addEventListener("play", () => textarea.focus());
audioPlayer.addEventListener("pause", () => textarea.focus());
</script>
</body>

关键说明 #

1. 直接绑定事件到audio元素，确保所有点击播放器区域的操作都能触发事件；
2. 用setTimeout延迟焦点设置，是为了覆盖浏览器处理音频控件点击后自动获取焦点的默认行为；
3. 额外监听play/pause事件，确保即使通过键盘快捷键等非点击方式触发状态切换，焦点也能切回文本域。

内容的提问来源于stack exchange，提问作者miladjurablu