web-dev-qa-db-fra.com

Ionic 4 clavier couvre le champ de saisie

J'ai une application Ionic 4 qui a une forme avec des entrées dedans.
Lorsque l'utilisateur clique sur l'entrée, il ouvre le clavier, mais il masque le contenu, sans défilement.
Y a-t-il un moyen de contourner cela?

Voici mon code:

<form #f="ngForm" (ngSubmit)="sendMail()">
   <ion-item>
     <ion-label position="floating">name
     </ion-label>
     <ion-input [(ngModel)]="senderName">
     </ion-input>
   </ion-item>

   <ion-item>
      <ion-label position="floating">mail
      </ion-label>
      <ion-input [(ngModel)]="senderMail">
      </ion-input>
    </ion-item>

    <ion-item class="borderedTextArea">
      <ion-textarea [(ngModel)]="mailText" style="height:150px;"></ion-textarea>
    </ion-item>

    <ion-button type="submit" style="float:left">send</ion-button>

</form>
cordovaionic-frameworkionic4
6
amitairos

Je résous cela en rétrogradant le plugin clavier

ionic cordova plugin remove cordova-plugin-ionic-keyboard

ionic cordova plugin add [email protected]

puis supprimez la plate-forme Android et ajoutez-la à nouveau

0
poimsm2

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

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

et dans vos .ts

@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);
}

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

0
lokoxumusu

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

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);
      });
    }
}

bibliothèques nécessaires:

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

importations

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

N'est pas une solution élégante mais ça marche

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

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);
});

entrez la description de l'image ici

0
angelvals