Если нужно что-то сделать при появлении клавиатуры в мобильном приложении на Битрикс.При...

Социальная сеть
Данное сообщество не является официальным и не преследует ни каких целей. Владелец сайта оставляет за собой право удалять сообщения по своему усмотрению. Рекламные темы и сообщения только с согласия администратора.

Вход Регистрация
Быстрый вход / регистрация, через социальную сеть
Регистрируясь на сайте, Вы безоговорочно принимаете условия политики конфеденциальности и обработки персональных данных

Михаил Базаров

Дата последнего входа: 49 минут назад
Дата регистрации: 7 Февраля 2012 21:17
День рождения: 7 ноября
Пол: Мужской
Михаил Базаров -> Всем
29 мая 10:27
Если нужно что-то сделать при появлении клавиатуры в мобильном приложении на Битрикс.

При вызове клавиатуры, внутри приложения страница сжимается по высоте. То есть, клавиатура накладывается не поверх контент, а именно уменьшает высоту контента, на свою высоту.

Кстати, это актуально и для обычных сайтов, в мобильном браузере

Частный случай:
- В приложении имеется закрепленная снизу панель, с быстрыми ссылками.
- При вызове клавиатуры (например написать комментарий) эта панель также поднимается над клавиатурой, перекрывая пол экрана.
- На iOS еще и ведет себя не адекватно, оказываясь в центре и ломая верстку
- Решение: прятать эту панель в display:none при появлении клавиатуры

Для этого блока добавляем id="keyborad_show", понятное дело, id можно любой.
<div id="keyborad_show" class="bottom_fixed">
       <a href="/mobileapp/dynamic/audio"><span class="fa fa-file-audio-o"></span> Аудио</a>
       <a href="/mobileapp/dynamic/video/"><span class="fa fa-file-video-o"></span> Видео</a>
       <a href="/mobileapp/dynamic/trand/"><span class="fa fa-fire"></span> Тренд</a>
</div>

Дальше все просто.
Включаем слежение за клавиатурой
BXMobileApp.UI.Page.captureKeyboardEvents(true);

На событие ее появления, просто добавляем класс к нужному элементу
var keyboard = document.getElementById('keyborad_show');
BX.addCustomEvent("onKeyboardDidShow", function(){ // Событие появления клавиатуры
       $(keyboard).addClass('dn_bf');
});
Ну и в css добавляем
.dn_bf {
      display: none;
}