Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't type any letters or numbers in text inputs in fullscreen mode on webkit browsers

After switching to fullscreen mode (tested on chrome and safari), I can't type any letters or numbers in text inputs, but I still can enter special characters like *¨%£ but no simple letters...

The code is really simple :

HTML

<button type="button" id="fullScreen">LAUNCH FULLSCREEN</button>
<input type="text" /> 

JS

function launchFullScreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}

document.getElementById("fullScreen").addEventListener("mousedown", function(){
  launchFullScreen(document.documentElement);
}, false);

As Jan Dvorak mentioned, the problem appears only when using the js function, the bug doesn't appears when using the browser build-in fullscreen button/shortcut

See it in action :

http://jsfiddle.net/QwqT7/show/

UPDATE 2 :

Just tested on Firefox for mac, no problems in fullscreen mode. It seems that the problem is webkit only.

like image 915
Julian Avatar asked Apr 28 '13 19:04

Julian


People also ask

How do I force HTML full screen?

Full-screen can be activated for the whole browser window by pressing the F11 key. It can be exited by pressing the Esc button.

Does fullscreen API require user permission?

To enable a full-screen view on a user's browser, you will first need to ask for permission to do so with the Element. requestFullScreen function.

How do I make my browser full screen?

The fastest way to run Google Chrome in full-screen mode is to press the F11 key on your keyboard.

What is fullscreen mode?

Full screen mode allows you to watch videos that take up your entire screen.


1 Answers

It's not a perfect solution, but at least it will allow Chrome to responds to keyboard commands and let Safari use the fullscreen mode without key inputs as a fallback.

function launchFullScreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)){
    element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
  }
  setTimeout(function() {
    if (!document.webkitCurrentFullScreenElement && element.webkitRequestFullScreen()) {
      element.webkitRequestFullScreen();
    }
  },100);
}
like image 60
Julian Avatar answered Sep 29 '22 07:09

Julian