仅使用 Javascript 捕获 ESC 键
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14925036/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Capturing the ESC key using Javascript only
提问by Batman
I have a custom video play with it's own controls. I have a script to make changes to the controls when the user enters and exists fullscreen. The problem is that when I exit fullscreen using the ESC key instead of the button, the style changes to the controls are not reverted back. I need to ensure that exiting fullscreen using ESC or button will result in the same behaviour.
我有一个带有自己控件的自定义视频播放。我有一个脚本可以在用户进入并全屏存在时对控件进行更改。问题是当我使用 ESC 键而不是按钮退出全屏时，控件的样式更改不会恢复。我需要确保使用 ESC 或按钮退出全屏会导致相同的行为。
CSS:
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();
}
}
回答by Gibolt
event.key === "Escape"
event.key === "Escape"
More recent and much cleaner: use event.key. No more arbitrary number codes!
更新更干净：使用event.key. 没有更多的任意数字代码！
document.addEventListener('keydown', function(event) {
const key = event.key; // Or const {key} = event; in ES6+
if (key === "Escape") {
// Do things
}
});
回答by zevdg
Edit:This answer is outdated. For modern browsers, @Gibolt's answeris better. If you need to support IE11, you can fallback to the legacy event.keyCode. See this articlefor more details.
编辑：这个答案已经过时了。对于现代浏览器，@Gibolt 的答案更好。如果您需要支持 IE11，您可以回退到旧版 event.keyCode。有关更多详细信息，请参阅此文章。
It sounds like you want to attach a keypress event to the document. Something like this ought to do the trick.
听起来您想将按键事件附加到文档。像这样的事情应该可以解决问题。
document.onkeypress = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
alert("Esc was pressed");
}
};
For more info, check out this article
有关更多信息，请查看这篇文章
