如何用jQuery实现非输入框聚焦时按空格键控制HTML5视频播放暂停？

核心逻辑优化 #

• 新增焦点元素判断：仅当当前聚焦元素不是输入类可编辑元素时，才触发视频的播放暂停逻辑
• 移除不必要的定时器逻辑，直接在键盘事件回调中同步处理，无响应延迟
• 新增默认事件阻止，避免按空格触发页面滚动的默认行为

修复后代码 #

$(window).keydown(function(e) {
  // 匹配空格键
  if (e.which === 32) {
    const activeElement = document.activeElement;
    // 聚焦在输入类元素时不拦截空格输入
    if (
      activeElement.tagName === 'INPUT' ||
      activeElement.tagName === 'TEXTAREA' ||
      activeElement.isContentEditable
    ) {
      return;
    }
    const video = document.getElementById('vid');
    // 阻止空格默认滚动页面的行为
    e.preventDefault();
    // 切换播放状态
    video.paused ? video.play() : video.pause();
  }
});

补充说明 #

如果站点有其他自定义可编辑元素需要排除，直接在判断条件中补充对应规则即可。

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