最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin5浏览0评论

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 :

/

UPDATE 2 :

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

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/QwqT7/show/

UPDATE 2 :

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

Share Improve this question edited Apr 28, 2013 at 20:02 Julian asked Apr 28, 2013 at 19:31 JulianJulian 8263 gold badges10 silver badges19 bronze badges 5
  • 1 confirmed, weird. Looks like a bug. jsfiddle/QwqT7/show – John Dvorak Commented Apr 28, 2013 at 19:35
  • It only happens if I use the button to go fullscreen, though. It works correctly when doing F11 – John Dvorak Commented Apr 28, 2013 at 19:36
  • you're right, I will update the question and add your jsfiddle, thanks – Julian Commented Apr 28, 2013 at 19:40
  • Try setting some other element fullscreen. Say, document.body – John Dvorak Commented Apr 28, 2013 at 19:40
  • @JanDvorak I tried with document.body and a div: same problem. – Julian Commented Apr 28, 2013 at 19:47
Add a ment  | 

2 Answers 2

Reset to default 3

It's not a perfect solution, but at least it will allow Chrome to responds to keyboard mands 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);
}

Mozilla note says:

For security reasons, most keyboard inputs have been blocked in the fullscreen mode. However, in Google Chrome you can request keyboard support by calling the method with a flag...

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论