我有一个带有自己控件的自定义视频播放。我有一个脚本可以在用户进入并存在全屏时更改控件。问题是,当我使用 ESC
键而不是按钮退出全屏时,控件的样式更改不会恢复。我需要确保使用 ESC
或按钮退出全屏会导致相同的行为。
CSS:
function toggleFullScreen() {
elem = document.getElementById("video_container");
var db = document.getElementById("defaultBar");
var ctrl = document.getElementById("controls");
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
ctrl.style.width = '50%';
ctrl.style.left = '25%';
full.firstChild.src = ('images/icons/unfull.png');
elem.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
full.firstChild.src = 'images/icons/unfull.png';
ctrl.style.width = '50%';
ctrl.style.left = '25%';
elem.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
ctrl.style.width = '50%';
ctrl.style.left = '25%';
full.firstChild.src = 'images/icons/unfull.png';
elem.webkitRequestFullscreen();
}
} else if (document.exitFullscreen) {
full.firstChild.src = 'images/icons/full.png';
ctrl.style.width = '100%';
ctrl.style.left = '0';
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
full.firstChild.src = 'images/icons/full.png';
ctrl.style.width = '100%';
ctrl.style.left = '0';
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
ctrl.style.width = '100%';
ctrl.style.left = '0';
full.firstChild.src = 'images/icons/full.png';
document.webkitCancelFullScreen();
}
}
最佳答案
event.key === "转义"
更新更简洁:使用 event.key
。不再有任意数字代码!
document.addEventListener("keydown", function(event) {
const key = event.key; // Or const {key} = event; in ES6+
if (key === "Escape") {
// Do things
}
});
现代风格,带有 lambda 和解构
document.addEventListener("keydown", ({key}) => {
if (key === "Escape") // Do things
})
关于javascript - 仅使用 JavaScript 捕获 ESC 键,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14925036/