.keypress在瀏覽器不工作（除鉻）

我有沒有在任何瀏覽器中工作，除了鉻的JS？這可能是.keydown函數造成麻煩。有一段代碼。它是由一個交互式的視頻，當按鍵被按下視頻的不同層應該彈出。.keypress在瀏覽器不工作（除鉻）

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); 
    });

瀏覽器不會給出任何錯誤。我不知道該從哪裏繼續。有任何想法嗎？

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>

來源

2017-01-29 Aljosa

使用

document.body.addEventListener（）

代替document.addEventListener（）

來源

2017-01-29 12:26:44

似乎也沒有幫助。我應該更換其他東西嗎？ – Aljosa

我覺得問題是你的風格，而不是與腳本 –

– Aljosa

據我所知，鍵盤嘗試相關事件只有在元素具有焦點時纔會觸發。所以基本上你需要把重點放在正確的工作上。將事件附加到窗口對象上怎麼樣？

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

我只是檢查對鉻和FF，均加工。

來源

2017-01-29 14:39:56 modernator

嗨！我附上了這條線。現在瀏覽器記錄按鍵。但視頻不會改變。是否有可能編碼這個搞砸了HTML？我將代碼添加到原始poste。 – Aljosa

.keypress在瀏覽器不工作（除鉻）

回答

相關問題