实现非文本框输入时按键暂停HTML <video>标签的功能

嘿，这个问题我之前做自定义视频播放器的时候也踩过坑！核心原因就是你绑定的全局按键事件（比如挂在document或window上的）会接收所有按键事件——哪怕用户的焦点在文本框里，按键事件还是会冒泡到上层，触发你的视频控制逻辑。

你之前尝试检测输入状态没生效，大概率是判断逻辑不够全面，比如只检查了单个输入框，或者没覆盖所有可编辑元素类型。下面给你两种靠谱的解决方案：

方案一：通用型——判断触发元素类型 #

在按键事件回调里，先判断当前触发事件的元素是不是输入类控件，如果是，直接跳过视频控制逻辑：

document.addEventListener('keydown', (e) => {
  // 覆盖所有常见可输入场景：文本框、多行文本框、可编辑内容元素
  const isInputting = 
    e.target.tagName === 'INPUT' || 
    e.target.tagName === 'TEXTAREA' || 
    e.target.isContentEditable;

  // 如果当前处于输入状态，直接返回，不执行视频控制
  if (isInputting) return;

  // 你的视频控制逻辑
  if (e.key === ' ') {
    e.preventDefault();
    const video = document.querySelector('video');
    video.paused ? video.play() : video.pause();
  }
});

这个方案的好处是通用性强，不管页面上有多少个输入框，都能准确判断。

方案二：精准型——针对特定输入框判断 #

如果你只想排除某个特定的文本框，可以检查当前页面的焦点元素是不是目标输入框：

// 先获取你的文本框元素
const targetInput = document.getElementById('your-input-id');

document.addEventListener('keydown', (e) => {
  // 如果焦点在目标文本框里，跳过逻辑
  if (document.activeElement === targetInput) return;

  // 你的视频控制逻辑
  if (e.key === ' ') {
    e.preventDefault();
    const video = document.querySelector('video');
    video.paused ? video.play() : video.pause();
  }
});

这个方案更精准，适合页面只有单个特定输入框的场景。

为啥你之前的检测没生效？ #

大概率是这两个原因：

• 只判断了单个输入框，但页面上可能存在其他可输入元素（比如隐藏的输入控件、浏览器自带的表单元素）
• 判断逻辑有误，比如拼写错了输入框的ID，或者没考虑到isContentEditable标记的可编辑元素

你可以试试上面的方案，应该能解决问题！

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