И в 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,
это, скорее, деактивирует нативную функцию прокрутки при переполнении блока, которая обычно запускается автоматически в
результате фокуса на элементы ввода, расположенные ниже клавиатуры.