.keypress在浏览器中不起作用（Chrome浏览器除外）

Question

I have an js that is not working in any browser except chrome? 我有一个js，除了chrome以外，无法在任何浏览器中正常工作？ Is it maybe the .keydown function that makes trouble. 可能是.keydown函数造成了麻烦。 There is a snippet of the code. 有一段代码。 It is made as an interactive video and when key is pressed a different layer of video is supposed to pop up. 它是作为交互式视频制作的，当按下按键时，应该弹出另一层视频。

    var videos = document.querySelectorAll("video");
var promises = Promise.all(Array.prototype.slice.call(videos).map(function(video) {
    return new Promise(function(resolve, reject) {
      video.addEventListener("canplaythrough", resolve);
      video.addEventListener("error", reject);
    })
  }))
  .then(function() {
    videos.forEach(function(video) {
      video.play();
    });
    videos[2].style.display = "none";
    document.addEventListener("keydown", function(e) {
      var key = e.key;
      if (key === "b" || key === "B") {
        videos[2].style.display = "block";
        videos[1].style.display = "none";
        videos[0].style.display = "none";
      }
    });
    videos[1].style.display = "none";
    document.addEventListener("keydown", function(e) {
      var key = e.key;
      if (key === "a" || key === "A") {
        videos[2].style.display = "none";
        videos[1].style.display = "block";
        videos[0].style.display = "none";
      }
    });
    document.addEventListener("keyup", function(e) {
      videos[2].style.display = "none";
      videos[1].style.display = "none";
      videos[0].style.display = "block";
    });
    window.focus();
  })
  .catch(function(err) {
    console.log(err);
  });

Browser doesn't give any errors. 浏览器没有给出任何错误。 And i don't know where to go on from here. 而且我不知道从这里继续前进。 Any ideas? 有任何想法吗？

HTML: HTML：

<html>
  <head>
    <body bgcolor="#00">
    <center><img src="head.png" alt="Head"></center>
  </head>
 <style>
 video {
  position: absolute;
  left: 12vw;
}
.full-frame {
    width:75%%;
    height:75%
}
</style>
<br><br>
<div id="video"; overflow: hidden">
   <video src="1.mov" style="width: 75%; height: 75%;" autoplay loop></video>
    <video src="2.mov" style="width: 75%; height: 75%;" autoplay loop></video>
   <video src="3.mov" style="width: 75%; height: 75%;" autoplay loop></video>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Answer 1

Try using 尝试使用

document.body.addEventListener() document.body.addEventListener（）

instead of document.addEventListener() 代替document.addEventListener（）

Answer 2

As I know, keyboard related events are only fires when the element has focus. 据我所知，与键盘相关的事件仅在元素具有焦点时才会触发。 So basically you need give the focus to work correctly. 因此，基本上，您需要重点关注才能正常工作。 What about attaching event on window object? 在窗口对象上附加事件呢？

window.addEventListener('keydown', (e) => console.log(e.keyCode))

I just checked on chrome and FF, both were worked. 我只是检查了chrome和FF，两者都奏效了。

.keypress在浏览器中不起作用（Chrome浏览器除外）

问题描述

2 个解决方案

解决方案1
0 2017-01-29 12:26:44

解决方案2
0 2017-01-29 14:39:56

.keypress在浏览器中不起作用（Chrome浏览器除外）

问题描述

2 个解决方案

解决方案1 0 2017-01-29 12:26:44

解决方案2 0 2017-01-29 14:39:56

解决方案1
0 2017-01-29 12:26:44

解决方案2
0 2017-01-29 14:39:56