И в Android, и в iOS Ionic будет пытаться не допустить затемнения элементов ввода и элементов, имеющих фокус, когда производится скроллинг, и они входят в вид представления. Чтобы это работало, любой из элементов, имеющих фокус, должен быть в пределах Scroll View или такой директивы, как Content, которая имеет Scroll View.
Она тоже будет пытаться предотвратить прокрутку при нативном переполнении в отношении фокуса, что может повлечь проблемы с компоновкой, например, заголовки в шапках сдвинутся вверх и за пределы области представления.
Клавиатура лучше всего работает вместе с плагином Ionic Keyboard Plugin,
хотя и без него она тоже будет функционировать достаточно хорошо. Однако, если вы имеете дело с Cordova, нет причины для того, чтобы не воспользоваться данным плагином.
Скрыть, когда отображается клавиатура
Чтобы спрятать элемент, когда открыта клавиатура, добавьте класс hide-on-keyboard-open
.
<div class="hide-on-keyboard-open">
<div id="google-map"></div>
</div>
Примечание: Для улучшения производительности элементы не будут скрыты в течение 400 мс после запуска из плагина Ionic Keyboard plugin события native.keyboardshow
. Если вы хотите, чтобы они тут же исчезли, вы можете сделать что-то вроде:
window.addEventListener('native.keyboardshow', function(){
document.body.classList.add('keyboard-open');
});
Это добавляет тот же самый класс keyboard-open
, который обычно добавляет Ionic через 400 мс после того, как открывается клавиатура. Однако имейте в виду, что добавление этого класса к телу может моментально вызвать замедления анимации на Android. Проблемы с анимацией появляются, когда открывается клавиатура (например, при прокрутке любых затемненных элементов ввода в вид представления).
Использование плагина
Информацию по использованию плагина можно найти по этой ссылке:
https://github.com/driftyco/ionic-plugins-keyboard.
Примечание для Android
- Если ваше приложение работает в полноэкранном режиме, т.е. у вас записано
<preference name="Fullscreen" value="true" />
в файлеconfig.xml
,
вам нужно вручную прописатьionic.Platform.isFullScreen = true
- Вы можете конфигурировать поведение веб-представления при отображении клавиатуры настройкой
android:windowSoftInputMode,
меняя параметрыadjustPan
,adjustResize
илиadjustNothing
.
Это делается вAndroidManifest
.
xml
. Для Ionic рекомендуется настраиватьadjustResize
, но если вы используетеadjustPan
, вам потребуется
откорректироватьionic.Platform.isFullScreen = true
.
<activity android:windowSoftInputMode="adjustResize">
Примечание для iOS
Если контент вашего приложения (включая хедер) выходит за верхние границы области просмотра
и не виден при фокусе ввода, попытайтесь установить cordova.plugins.Keyboard.disableScroll(true)
.
Это не отключит скроллинг в Ionic scroll view,
это, скорее, деактивирует нативную функцию прокрутки при переполнении блока, которая обычно запускается автоматически в
результате фокуса на элементы ввода, расположенные ниже клавиатуры.