Высота textarea на android (ios)?

Question

[Евгений Попов]

Какие есть способы, установить вертикальный размер (height) активного textarea блока с учетом открытой виртуальной клавиатуры на веб-странице?

Чтобы, по возможности, textarea не выходила за границе экрана и не перекрывалась клавиатурой.

Comments

[Кирилл Длусский]

А каков изначальный размер textarea? Нельзя ли сразу в мобильной версии ужимать сей элемент до половины $(window).height()?

[Евгений Попов]

Изначальный размер textarea — [размер окна] — [отступ сверху] под тулбар: $(window).height() — $(«section»).offset().top;

section прописан так же отступ под тулбар margin-top
события resize на scroll(), resize(), click()

[Евгений Попов]

Позволяет решить ряд проблем с текстовым блоком, если над ним нет абсолютно позиционированного блока (тулбар и тд) тогда он ведет себя более адекватно (не скачет и отображается полностью), но так же не скалируется с учетом клавиатуры.

Answer 1

[Артур Кох]

$('textarea').css('height', $(window).height() + 'px');

Применяем как при загрузке документа, так и при изменении размера окна.
Я правильно понимаю, что при появлении экранной клавиатуры по факту происходит изменение высоты видимой области?

Comments

[Евгений Попов]

Да, происходит уменьшение Видимой области. Предложенный вами способ один из первых, что приходил ко мне в голову. Тесты показали, что блок в таком случае съезжает вверх нижним краем упираясь в клавиатуру и в большинстве случаев его верхняя кромка становиться выше видимой области экрана и не позволяет проскролить вверх до верхней кромки. Появление клавиатуры никак не сказывается на размерах: $(window).height(), window.innerHeight, window.outerHeight возможно необходимо замерять размеры другого элемента, но информации на данный счет не нашел, к сожалению.

[Артур Кох]

Вынужден все же спросить, устанавливали ли вы вышеописанный скрипт на событие $(window).resize? Если да, то это действительно странно, так как при том же открытии firebug'a в браузере, значение $(window).height() изменяется.

Если все действительно так, как вы описали, выходит экранная клавиатура является элементом в верстке, нежели в интерфейсе обозревателя. Следовательно есть возможность отследить событие появления клавиатуры, замерять при помощи height() ее высоту и вычесть это значение из $(window).height()

[Кирилл Длусский]

Судя по тому, что клавиатуру можно вызвать в любом приложении, в т.ч. ее использования не подразумевающей, клавиатура таки ни коим образом не влияет ни на layout приложения ни на DOM страницы (тем не менее, сами андроид-приложения могут определять появление клавиатуры и обрабатывать их должным образом. Видимо браузер андроида делать это нужным не считает)

[Евгений Попов]

В том то и дело что браузер обрабатывает ее появление сдвигая блок textarea вверх упирая нижнюю грань textarea в верхнюю кромку появившейся клавиатуры собственно и остальной контент при появлении оной так или иначе на нее реагирует непонятно только эта реакция на базе оси и или все таки с ней можно как-то взаимодействовать и отслеживать…

[Кирилл Длусский]

Это реакция оси, уверен на 90% что js-апи с подобным функционалом там нет(

Answer 2

[Кирилл Длусский]

ИМХО, 90% пользователей открывают клавиатуру нажатием на textarea. Было бы логично, мне кажется, вешать изменение размера на получение фокуса)
Ну и если будет скакать — добавить еще и scroll(), или как это называется в jquery?..

Comments

[Артур Кох]

Хорошо, мы можем отловить фокус, но на всех ли андроидах эта клавиатура единого размера по высоте? Каким образом высчитывать ресайз?

[Евгений Попов]

Да, конечно и такое событие на onclick именно через jquery тоже пробовал. На scroll, resize тоже стоит пересчет размера в зависимости от размера window по высоте, но судя по размеру textarea и размерам в px выводимым для дебага размер window с клавиатурой и без клавиатуры не меняется. Возможно есть возможность отследить появление клавиатуры или ее размер, но не нашел.

[Кирилл Длусский]

Ну так я и говорю, что отследить размер клавы не получится(
Мне кажется можно взять половину экрана в качестве наиболее популярного значениия и успокоиться на этом)
З.ы. пишу этот камент с андроида, у хабра размер поля ввода — где-то треть пустого места на стандартном зуме. Никакаго дискомфорта это не вызывает. Особенно на фоне того, что по ширине оно в экран не помещается)