Если нужно что-то сделать при появлении клавиатуры в мобильном приложении на Битрикс.
При вызове клавиатуры, внутри приложения страница сжимается по высоте. То есть, клавиатура накладывается не поверх контент, а именно уменьшает высоту контента, на свою высоту.
Кстати, это актуально и для обычных сайтов, в мобильном браузере
Частный случай:
- В приложении имеется закрепленная снизу панель, с быстрыми ссылками.
- При вызове клавиатуры (например написать комментарий) эта панель также поднимается над клавиатурой, перекрывая пол экрана.
- На iOS еще и ведет себя не адекватно, оказываясь в центре и ломая верстку
- Решение: прятать эту панель в display:none при появлении клавиатуры
Для этого блока добавляем id="keyborad_show", понятное дело, id можно любой.
Дальше все просто.
Включаем слежение за клавиатурой
На событие ее появления, просто добавляем класс к нужному элементу
Ну и в css добавляем
При вызове клавиатуры, внутри приложения страница сжимается по высоте. То есть, клавиатура накладывается не поверх контент, а именно уменьшает высоту контента, на свою высоту.
Кстати, это актуально и для обычных сайтов, в мобильном браузере
Частный случай:
- В приложении имеется закрепленная снизу панель, с быстрыми ссылками.
- При вызове клавиатуры (например написать комментарий) эта панель также поднимается над клавиатурой, перекрывая пол экрана.
- На 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'); }); |
| .dn_bf { display: none; } |
