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

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

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

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

Частный случай:
- В приложении имеется закрепленная снизу панель, с быстрыми ссылками.
- При вызове клавиатуры (например написать комментарий) эта панель также поднимается над клавиатурой, перекрывая пол экрана.
- На 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;
}

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

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

Авторизация