Полноэкранное текстовое поле на фокусе

Question

Как я могу получить полноэкранное текстовое поле, используя только js, jquery или css? Большинство телефонов имеют эту вещь, когда текстовое поле выходит в полный экран, и вы можете видеть только текстовое поле. Я посмотрел это, но нашел некоторые решения только на уровне приложений. Я делаю это на веб-странице, поэтому невозможно внести изменения в приложение.

И текстовое поле находится внутри popover и, следовательно, изменение его ширины и высоты не будет работать.

Так или иначе, чтобы достичь этого, используя обычные веб-компоненты?

Answer 1

Вы можете попробовать использовать полноэкранный API HTML5, учебник, который я связал, работает с видео, но та же идея может быть использована для любого элемента, который я предполагаю. Он экспериментальный, но поддерживается на webkit и moz. Heres ссылка:

MDN Fullscreen HTML5 API

В качестве примечания, я бы добавил это как комментарий, но моя репутация разве высокий, но достаточно, так что просто разместил здесь.

Answer 2

что-то ищет this(jsfiddle)?

<textarea id="fill-screen"></textarea> 

JQuery

$(function(){ 
$('#fill-screen').focus(function(){ 
    $('#fill-screen').css({'height': window.innerHeight, 
          'width':window.innerWidth}); 
    }) 
});