Як відстежувати та правельно налаштувати клавіатуру в Cordova

У всіх додатках зʼявляється необхідність відстежувати розмір, так поведінку мобільної клавіатури. Нажаль в Cordova (v12.0 | 2024) це зробити не так просто, тому що при спробі будь якого рішення ви зіткнетеся з великою кількістю багів. Тому для того, щоб відстежувати відкриття та закриття мобільних клавіатур, та відстежувати їх розмір, доведеться робити костилі.

Для досягення цілей нам доведеться використовувати відразу 2 плагіна. Томущо один працює на Android, а інший в iOS. 

Перший це - cordova-plugin-keyboard, і він чудово працює в iOS, але не працює в Android. Інший це - cordova-plugin-ionic-keyboard, він не працює нормально в iOS, але працює в Android.

cordova plugin add cordova-plugin-ionic-keyboard
cordova plugin add cordova-plugin-keyboard

Далі в вашому config.xml потрібно додати деякі налаштування:

<preference name="KeyboardShrinksView" value="true" /> 
<preference name="resizeOnFullScreen" value="true" />
<preference name="KeyboardResize" value="true" />

<platform name="android">
   <edit-config file="AndroidManifest.xml" target="/manifest/application/activity[@android:name='MainActivity']" mode="merge">
        <activity android:name="MainActivity" android:windowSoftInputMode="adjustResize" />
        <activity android:name="MainActivity" android:isScrollContainer="true" />
   </edit-config>
</platform>

Ці налаштування зроблять так, що ваша клавіатура буде відкриватися не поверх вашого додатку, а буде зміщати його.  Зверніть увагу, що в тегі platform android, у вас можуть бути інші данні, тому просто додайте те що вказано в середені з прикладу.

Зверніть увагу, що після додавання тегів для Android може виникнути помилка сбірки config.xml, для її вирішення додайте до тегу <widget xmlns:android="http://schemas.android.com/apk/res/android" />.

Далі в вашому додатку Corodva вам потрібно змінювати розмір вашого контенту, для того, щоб змінювався розмір viewport. Я використовую Vue 3, тому приклад буде саме на вью, але ви можете інтерпритувати цей приклад для інших бібліотек.

App.vue:

<template lang="pug">
.g(:style="{'--keyboard': keyb_comp + 'px'}")
  .g__gv
    RouterView(v-slot="{ Component }")
      transition(name="fg" )
        component(:is="Component")
</template>

<script setup>
const keyb = ref(0);
const keyb_comp = computed(() => keyb.value || 0)

onMounted(async () => {

  window.addEventListener('keyboardHeightWillChange', function (event) {
    keyb.value = event.keyboardHeight +  3;
  });

  window.addEventListener('keyboardDidShow', function (event) {
    if(!event.keyboardHeight) return 
    const keyboardHeight = event.keyboardHeight || 0;
    keyb.value = keyboardHeight + 3;
  });

  window.addEventListener('keyboardDidHide', function () {
    keyb.value = 0;
  });
})
</script>

<style lang="stylus">
.g
  min-height calc(100vh - var(--keyboard))
  display flex
  flex-direction column
  padding-bottom 25px
  padding-left 16px
  padding-right 16px
  width 100%
  background var(--bg)
</style>

Тепер пояснення - в прикладі зібрані евенти з двух різних плагінів, один евент працює в Android, інший в iOS, і ці евенти нажаль в різних плагінах. 

Фактично ми відстежуємо зміну висоти клавіатури і міняєм розмір контенту на сторінці. 

Можливо в вашому випадку можете довестись для body давати overflow hidden, position fixed, size 100%, а для .g не min-height, а height, position fixed, overflow auto. Але це ситуативно, фактично я вам показав як відстежувати розмір клавіатури в Cordova, відстежувати відкриття закриття, та зробити так, щоб клавіатура не відкривалась поверх контента.