Champ de saisie du clavier Ionic 4

J'ai résolu ce bug Ionic provisoirement avec:

@ViewChild(IonTextarea)
public ionTextArea: IonTextarea;
private focusFix = false;

...
...

public fixTextareaBug() {
  setTimeout(() => {
    if (this.focusFix) {
      this.focusFix = false;
      return;
    }
    (this.ionTextArea as any).el.lastElementChild.blur();
    this.focusFix = true;
    (this.ionTextArea as any).el.lastElementChild.focus();
  }, TEXTAREA_TIMEOUT);
}

et dans votre .ts

...
<ion-texarea (ionFocus)="fixTextareaBug()">
...

J'espère que cela a résolu votre problème

J'avais ce problème aussi, mais uniquement sous Android, ce que j'ai fait était de créer un script qui obtenait la hauteur de l'élément focalisé et du clavier, et en utilisant jQuery, j'ai ajouté un marginTop pour déplacer le corps au-dessus du clavier lorsque le le clavier s'affiche, voici mon code:

this.keyboard.onKeyboardShow().subscribe((e) => {
    const safeArea = 40 ;
    const offset1 = $(document.activeElement).offset().top;
    const offset2 = window.innerHeight - e.keyboardHeight - $(document.activeElement).height() - safeArea ;
    const diff = offset1 - offset2;
    if(offset1 > window.innerHeight -  e.keyboardHeight - safeArea)
        $('body').animate({ 'marginTop': -1 * diff + 'px' }, 100);
});

libs nécessaires:

    import { Platform } from '@ionic/angular';
    import * as $ from "jquery";
    import { Keyboard } from '@ionic-native/keyboard/ngx';
   

importations

    npm install jquery
    npm install @types/jquery
    ionic cordova plugin add cordova-plugin-ionic-keyboard
    npm install @ionic-native/keyboard

Ce n'est pas une solution élégante mais cela fonctionne

Juste quelques changements dans ce code offriront une meilleure expérience

constructor(
    private platform: Platform,
    private keyboard: Keyboard
  ) {
    if(this.platform.is('android')){
      this.keyboard.onKeyboardShow().subscribe((e) => {
        const offset = $(document.activeElement).offset().top;
        let height = (offset - e.keyboardHeight)*-1;
        height = height > 0 ? 0 : height;      
        $('body').animate({ 'marginTop': height + 'px' }, 100);
      });
      this.keyboard.onKeyboardHide().subscribe(e => {
        $('body').animate({ 'marginTop': 0 + 'px' }, 100);
      });
    }
}

J'utilise actuellement Ionic4 avec Cordova 9 et tous les derniers packages, et je n'ai trouvé aucun paramètre dans le cadre qui fonctionnait pour moi. En fin de compte, j'ai fait cette solution de contournement qui contourne complètement le cadre. Il a une petite animation et semble plutôt correct, donc je l'utilise jusqu'à ce que le framework résout ce problème correctement.

global.scss

declare var $: any;

ngAfterViewInit() {
    // This element never changes.
    let ionapp = document.getElementsByTagName("ion-app")[0];

    window.addEventListener('keyboardDidShow', async (event) => {
        // Move ion-app up, to give room for keyboard
        let kbHeight: number = event["keyboardHeight"];
        let viewportHeight: number = $(window).height();
        let inputFieldOffsetFromBottomViewPort: number = viewportHeight - $(':focus')[0].getBoundingClientRect().bottom;
        let inputScrollPixels = kbHeight - inputFieldOffsetFromBottomViewPort;

        // Set margin to give space for native keyboard.
        ionapp.style["margin-bottom"] = kbHeight.toString() + "px";

        // But this diminishes ion-content and may hide the input field...
        if (inputScrollPixels > 0) {
            // ...so, get the ionScroll element from ion-content and scroll correspondingly
            // The current ion-content element is always the last. If there are tabs or other hidden ion-content elements, they will go above.
            let ionScroll = await $("ion-content").last()[0].getScrollElement();
            setTimeout(() => {
                $(ionScroll).animate({
                    scrollTop: ionScroll.scrollTop + inputScrollPixels
                }, 300);
            }, 300); // Matches scroll animation from css.
        }
    });
    window.addEventListener('keyboardDidHide', () => {
        // Move ion-app down again
        // Scroll not necessary.
        ionapp.style["margin-bottom"] = "0px";
    });
}

app.component.ts

ion-app {
    /*animation of native keyboard show*/
    transition: margin 300ms;
}

Je résous ce problème en rétrogradant le plugin clavier

ionic cordova plugin remove cordova-plugin-ionic-keyboard

ionic cordova plugin add cordova-plugin-ionic-keyboard@2.0.5

, puis en supprimant la plate-forme Android et en l'ajoutant à nouveau

Résolvez-le simplement avec l'événement ionFocus et la fonction scrollToBottom, puis appelez-le dans ionFocus afin que lorsque vous vous concentrez sur l'entrée, votre contenu défile jusqu'en bas texte fort