【问题标题】：Capturing the ESC key using Javascript only仅使用 Javascript 捕获 ESC 键
【发布时间】：2013-02-17 19:19:42
【问题描述】：

我有一个带有自己控件的自定义视频播放。当用户进入并存在全屏时，我有一个脚本来更改控件。问题是当我使用 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();
        } 
}

【问题讨论】：

这个问题如何涉及Java？
我认为语法可能足够相似，可以让有 Java 经验的人提供帮助。对不起，如果我错了。
是的，您不会想做出这样的假设，因为虽然两种语言的语法共享 C 语言的根源，但这些语言在其他方面完全不同。祝你好运。

标签： javascript html html5-video

【解决方案1】：

event.key === "Escape"

更新更简洁：使用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
})

Mozilla Docs

Supported Browsers

【讨论】：

【解决方案2】：

编辑：这个答案已经过时了。对于现代浏览器，@Gibolt's answer 更好。如果需要支持 IE11，可以回退到旧的 event.keyCode。详情请见this article。

听起来您想将按键事件附加到文档。像这样的东西应该可以解决问题。

document.onkeypress = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
        alert("Esc was pressed");
    }
};

欲了解更多信息，请查看this article

【讨论】：

您认为在退出全屏语句中添加 document.onkeypress.keycode==27 作为 OR 条件会解决我的问题吗？
请注意，window.event 和 evt.keyCode 已被弃用。按照下面 Gibolt 的建议使用 KeyboardEvent.key。