如何（取消）关注 YouTube 的视频元素

Question

这个问题来自于我试图开发一个 浏览器扩展来增强 YouTube 的键盘导航。1. 背景通常，当网页将焦点放在 YouTube 的video播放器元素上或焦点何时放在页面主体上时，我一点也不清楚。如果焦点在video元素上，则方向键将控制视频；否则，如果焦点在页面主体本身，箭头键将控制滚动。我想添加一个快捷方式来（取消）激活video元素上的焦点。我怎么做？2.我试过的简单地使用document.querySelector('video').focus()或document.activeElement.blur()对我不起作用。也不是document.activeElement.setAttribute('disabled', 'true')...3. 其他信息理想情况下，因为在视觉上，用户通常不清楚焦点在哪里，我想稍后添加一些 CSS 边框装饰，但我认为一旦解决了之前的挑战，这就会很简单。坦率地说，为什么 YouTube 还没有这一切呢？他们这边好像很懒。。。

Answer 1

1. 一种可能的解决方案

尝试改变对元素的关注div #movie_player：

document.addEventListener('keydown', (evt) => {

  if (evt.key === 'v') {

    const player = document.querySelector('#movie_player');

    document.activeElement.id === 'movie_player'

      ? player.blur()

      : player.focus();

    console.log('Active Element:', document.activeElement);

  }

});

2. 奖励：上述解决方案的 Dart 版本

或者，既然你一直在使用 Dart：

document.onKeyDown.listen((KeyboardEvent keyboardEvent) {

  switch (keyboardEvent.key) {

    case 'v':

      final Element player = document.querySelector('#movie_player');

      document.activeElement.id == 'movie_player' 

          ? player.blur() 

          : player.focus();

      print('Active Element: ${document.activeElement}');

      break;

  }

});