web-dev-qa-db-fra.com

Ionic: le clavier chevauche une entrée de texte ciblée sur iOS 11

Problème

Lorsque je clique sur l'entrée de texte à partir du modal, un clavier chevauche l'entrée de texte. Ce problème a été détecté lors de tests sur un périphérique iPhone SE (iOS 11).

J'ai jeté un coup d'œil sur plusieurs sujets et essayé de résoudre le problème par moi-même, mais je me suis rendu compte que mon problème actuel est un problème chronique pour les développeurs Ionic jusqu'à maintenant.

Ce sont les liens liés à mon problème. J'ai essayé les solutions proposées à partir des liens ci-dessous, mais aucun d'entre eux n'a fonctionné avec mon code.

Informations sur la version

packages cli: (/ usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

forfaits globaux:

cordova (Cordova CLI) : 7.1.0

forfaits locaux:

@ionic/app-scripts : 3.1.4
Cordova Platforms  : Android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

Système:

ios-deploy : 1.9.2
Node       : v8.9.0
npm        : 5.5.1
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b

Comportement prévisible

La saisie ionique doit rester dans une position juste au-dessus du clavier pendant qu'un utilisateur tape certains messages.

Comportement actuel

 enter image description here

app.component.ts

J'ai inclus keyboard.disableScroll(true); dans platform.ready() pour éviter le problème de blocage de la barre de navigation. Sans cette ligne de code, le clavier fonctionne correctement avec le texte saisi. Mais il pousse tout le contenu vers le haut, y compris la barre de navigation. Ainsi, les premiers messages semblent être masqués.

Des idées?

MIS À JOUR

Je ne suis pas sûr que la façon dont j'ai résolu le problème soit la meilleure solution, mais pour l'instant, j'ai remplacé le contenu et le bas de la marge du pied de page par la somme de la hauteur initiale de la zone de texte et de la hauteur du clavier.

_ {Si vous avez une meilleure solution, n'hésitez pas à la laisser comme réponse.

Voici le résultat final.

 enter image description here

javascriptioscssionic-framework
6
JeffMinsungKim

J'avais des problèmes similaires dans une configuration de projet similaire où le clavier dans iOS chevauchait la barre de pied de page dans ionic. J'ai pu résoudre le problème en supprimant le [email protected] et en ajoutant [email protected]https://github.com/ionic-team/cordova-plugin-ionic-keyboard

Apparemment, je n'ai pas remarqué que ionic-plugin-keyboard était obsolète alors que je mettais mon projet à niveau de Ionic 1 à 2, je suppose que vous avez peut-être occupé un poste similaire.

7
coderroggie

Pour que les choses se passent bien, vous devez d'abord obtenir la hauteur de trois éléments, comme l'exemple de code ci-dessous. Par exemple,

@ViewChild(Content) content: Content;

ionViewDidLoad() {
  if (this.platform.is('ios'))
    this.addKeyboardListeners();

  this.scrollContentElement = this.content.getScrollElement();
  this.footerElement = document.getElementsByTagName('your page component')[0].getElementsByTagName('ion-footer')[0];
  this.inputElement = document.getElementsByTagName('your page component')[0].getElementsByTagName('textarea')[0];
}

Ajoutez ensuite un écouteur de clavier pour la plate-forme ios.

addKeyboardListeners() {
  this.keyboardHideSub = this.keyboard.onKeyboardHide().subscribe(() => {
    let marginBottom = this.textareaHeight - this.initialTextAreaHeight + 44;
    this.renderer.setElementStyle(this.scrollContentElement, 'marginBottom', marginBottom + 'px');
    this.renderer.setElementStyle(this.footerElement, 'marginBottom', '0px')
  });

  this.keybaordShowSub = this.keyboard.onKeyboardShow().subscribe((e) => {
    let newHeight = (e['keyboardHeight']) + this.textareaHeight - this.initialTextAreaHeight;
    let marginBottom = newHeight + 44 + 'px';
    this.renderer.setElementStyle(this.scrollContentElement, 'marginBottom', marginBottom);
    this.renderer.setElementStyle(this.footerElement, 'marginBottom', e['keyboardHeight'] + 'px');
    this.updateScroll(250);
  });
}

Enfin, il est important de désabonner les écouteurs du clavier chaque fois que vous quittez la page ..__ Faites-le comme méthode et appelez-le où vous le souhaitez.

removeKeyboardListeners() {
  this.keyboardHideSub.unsubscribe();
  this.keybaordShowSub.unsubscribe();
}
1
JeffMinsungKim

La solution de @coderroggie m'a sauvé la vie!

Il suffit de désinstaller ionic-plugin-keyboard puis d’installer c ordova-plugin-ionic-keyboard et cela fonctionnera.

Dans mon cas, j’avais deux fenêtres:.

  • Recherche avec la barre de recherche supérieure et la liste à complétion automatique: lorsque la barre de recherche est activée, le clavier chevauche la liste.

Merci @ Coderroggie.

1
testerino