2013-02-17 169 views
2

我有自定义的视频播放和自己的控件。我有一个脚本可以在用户输入并全屏显示时对控件进行更改。问题是,当我使用ESC键而不是按钮退出全屏时,控件的样式更改不会恢复。我需要确保使用ESC或按钮退出全屏将导致相同的行为。仅使用JavaScript捕获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(); 
     } 
} 
+1

请问这个问题涉及的Java? – 2013-02-17 19:20:34

+0

我认为对于有Java经验的人来说,语法可能足够相似。对不起,如果我错了。 – Batman 2013-02-17 21:13:43

+0

是的,你不会想做出这样的假设,因为当两种语言的语法共享C语言根源时,语言完全不同。祝你的问题好运。 – 2013-02-17 23:31:30

回答

6

这听起来像你想按键事件附加到文件。像这样的事情应该做的伎俩。

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

欲了解更多信息,请this article

+0

您是否认为在退出全屏语句中将document.onkeypress.keycode == 27添加为OR条件可以解决我的问题? – Batman 2013-02-17 21:13:06

0

event.key === “逍遥游”

最近的和更清洁:使用event.key。没有更多的任意数字代码!

document.addEventListener('keydown', function(event) { 
    const key = event.key; // Or const {key} = event; in ES6+ 
    if (key === "Escape") { 
     // Do things 
    } 
}); 

Mozilla Docs

Supported Browsers