Ionic-framework: Masquer automatiquement les onglets lorsque le clavier est ouvert

Oui, je suppose que vous êtes sous Android. L'ancien problème de clavier...

J'ai vu une conférence sur PhoneGap conf de @tlancina sur le clavier et cela semble être un problème assez difficile en général !
Je peux confirmer que la barre d'onglets inférieure est également poussée vers le haut lors de l'ouverture du clavier dans mon application sous Android. Mais le pire est de couvrir les champs de saisie qui sont près du bas. Tim a dit, il faut essayer d'éviter cela, mais malheureusement, il y a de longues listes à éditer dans mon projet.
J'ai reporté tout le sujet du clavier pour attendre et voir comment cela se passe dans ionic.

En outre, @tlancina , existe-t-il un tutoriel sur les meilleures pratiques sur l'utilisation du clavier dans ionic (intégration du plugin de clavier ionique, initialisation/configuration des gestionnaires d'événements) ?

Je rencontre également ce problème.

Nous avons également le même problème dans notre projet. Des plans à ce sujet ?

Hé les gars, je ressens aussi la douleur - des nouvelles par hasard ?

Vous avez également besoin de cette fonctionnalité intéressante, des onglets et peut-être même d'un en-tête agréable à masquer.

@ jgw96 J'ai remarqué que vous avez ajouté l'étiquette d'amélioration à ce sujet. Étant donné que les applications natives ne se comportent pas de la même manière (déplacement des onglets au-dessus du clavier) et que les onglets limitent également le contenu réel à quelques lignes, en particulier sur les téléphones plus petits, cela ne devrait-il pas être considéré comme un problème plus sérieux ?

Pour les personnes à la recherche d'une solution temporaire, voici ce que j'ai fait :

Constructeur TabsComponent :

platform.ready().then(() => {
            Keyboard.onKeyboardShow().subscribe(() => {
                document.body.classList.add('keyboard-is-open');
            });

            Keyboard.onKeyboardHide().subscribe(() => {
                document.body.classList.remove('keyboard-is-open');
            });
});

Dans le CSS :

body.keyboard-is-open ion-tabbar {
  display: none;
}

body.keyboard-is-open scroll-content {
  margin-bottom: 0 !important;
}

Cela ne fonctionnera pas si vous avez plusieurs onglets sur une page, mais je suppose que vous pouvez les sélectionner directement avec votre CSS.

J'utilise actuellement Ionic beta 11

Une mise à jour pour ceci?

@bvx89 Merci.
Pour le bien de ceux sur Rc0 il y a un léger changement sur le css

body.keyboard-is-open .tabbar {
  display: none;
}

body.keyboard-is-open .scroll-content {
  margin-bottom: 0 !important;
}

Pas encore de solution officielle

Juste pour mentionner que l'activation du mode plein écran sur Android résout également ce problème pour moi.
Cela peut être fait en définissant
<preference name="Fullscreen" value="true" />
dans config.xml, et éventuellement en ajoutant cordova-plugin-fullscreen si vous utilisez une plate-forme android cordova antérieure à la v5.0.0.

Cela va-t-il être corrigé dans la prochaine version avec le reste des problèmes de clavier qui vont être corrigés (lisez quelque chose indiquant cela à propos des problèmes de clavier dans un autre fil) ou est-ce que cela est tombé entre les mailles du filet ?

@RaymondAtivie
J'ai le même problème, est-ce que ça va être corrigé dans la prochaine version ?

Cela ne fonctionne pas pour moi dans RC3.
le onKeyboardShow() n'est jamais déclenché...

+1， j'ai le même problème.

CLI de Cordoue : 6.3.1
Version Ionique CLI : 2.1.8
Version de l'application Ionic Lib : 2.1.4
version ios-deploy : non installée
Version ios-sim : Non installé
Système d'exploitation : Windows 8.1
Version du nœud : v6.4.0
Version Xcode : Non installé

J'ai le même problème et la solution de contournement publiée par @RaymondAtivie ne fonctionne pas tout à fait correctement. les onglets ne sont plus visibles, mais il semble y avoir une bordure supérieure toujours visible. Quelqu'un d'autre a ce problème? j'ai essayé d'ajouter
box-shadow: none; border-top: none;
et se retrouve toujours avec la même bordure supérieure visible depuis la barre d'onglets. Des idées?

J'ai résolu ce problème en activant l'option fullscreen="true" ion-content fullscreen="true"
et définition du style masqué pour la barre d'onglets

      var tabbars =     document.getElementsByClassName('tabbar');
      for(var i=0; i<tabbars.length; i++) {
        var node = <HTMLElement>tabbars[i];
        node.style.display = hide === true && 'none' || 'block';
      }

J'ai essayé ceci et j'ai toujours la même bordure supérieure qui s'affiche même si la barre d'onglets est configurée pour afficher false.

@payneBrandon je cache la barre du haut
<ion-header *ngIf="isShowHeader()">

Mon ion-tab est en bas, donc masquer l'en-tête ne l'affecte pas beaucoup. J'ai joint une capture d'écran de ce dont je parle. Le clavier est affiché, les onglets en bas sont masqués, mais il semble toujours qu'il y ait une ligne de frontière supérieure qui reste en place si je fais défiler.

cette barre ressemble à une partie du formulaire
peux-tu partager ton code html ?

Enfin compris. Je n'ai pas eu à me soucier d'un en-tête puisque mes onglets sont en bas, MAIS j'ai dû regarder le pied de page (duh!). J'ai appliqué une classe conditionnelle au pied de page pour le masquer si le corps a la classe clavier-est-ouvert et BAM, de retour dans les affaires. Merci pour l'aide!

@payneBrandon bonne chance

J'aimerais aussi voir cette fonctionnalité.
De plus, je pense que ion-footer devrait prendre en charge la visibilité sur l'ouverture/la fermeture du clavier

J'ai fait une solution simple (bien sûr pas idéale). Le .scroll-content a un margin-bottom de 56px , la même hauteur a les onglets. Je vérifie le clavier :

public keyboardCheck() {
        return this.keyboard.isOpen();
}

puis attachez cette classe à ion-content , un parent de .scroll-content :

.keyboard-open .scroll-content {
    margin-bottom: 0px !important;
}

et ajoutez ceci à ion-content :

<ion-content padding [ngClass]="{'keyboard-open': keyboardCheck()}">

J'ai aussi caché les onglets lorsque le clavier est ouvert en utilisant la même méthode dans tabs.html :

<ion-tabs [ngClass]="{'remove-tabs': keyboardCheck()}">

.remove-tabs .tabbar {
    display: none;
}

Je l'ai fait uniquement pour la page pour laquelle j'avais besoin du correctif.

Fonctionne à la fois sur iOS et Android.

RÉSOLU

c'est une bonne solution sauf css marqué.

```
importer { Composant } de '@angular/core' ;
importer {Keyboard} depuis 'ionic-native'
importer { Page d'accueil } de '../home/home' ;
importer { AboutPage } de '../about/about';
importer { ContactPage } de '../contact/contact' ;

@Composant({
templateUrl : 'tabs.html'
})
classe d'exportation TabsPage {
// cela indique au composant tabs quelles pages
// devrait être la page racine de chaque onglet
tab1Root : any = Page d'accueil ;
tab2Root : any = AboutPage ;
tab3Root : any = ContactPage ;
valueforngif=true ;

constructeur (clavier public:Clavier) { }
ionViewDidEnter(){
Keyboard.onKeyboardShow().subscribe(()=>{this.valueforngif=false})
Keyboard.onKeyboardHide().subscribe(()=>{this.valueforngif=true})
}}

this my tabs.html

    ```
 <ion-tabs *ngIf="valueforngif">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle" [tabsHideOnSubPages]="true"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

nice @ efnan34 , bien que vous ne devriez pas avoir besoin de le fournir dans le constructeur.

Cela provoque la fermeture automatique de mon clavier lors de son ouverture... Est-ce dû au fait que le focus revient sur les onglets pour les masquer, ce qui à son tour fait fermer le clavier ?

ionViewDidEnter(){
    Keyboard.onKeyboardShow().subscribe(()=>{this.valueforngif=false})
    Keyboard.onKeyboardHide().subscribe(()=>{this.valueforngif=true})
}

@ bvx89 Votre solution est la seule que j'ai pu utiliser avec Ionic 2.1.0. Il y a un bogue enregistré pour ionic-native et les modifications n'étant pas détectées, les autres solutions de contournement n'ont pas fonctionné pour moi. Dans l'attente d'un correctif officiel pour cela

J'ai le même problème @Killmore
n'y a-t-il pas encore de solution officielle à cela?

Bonjour
La solution ci-dessus fonctionne également sur Ionic 2.1.0, mais un meilleur résultat [caché] attrb peut être utilisé à la place de * ngif. J'utilise cette solution dans mon projet, cela fonctionne bien

Bonne journée

Ci-dessus provoquera un scintillement sur certains appareils Android et est vraiment une mauvaise option.

Cela fonctionnera .. essayez ceci

var originalHeight = document.documentElement.clientHeight;
var originalWidth = document.documentElement.clientWidth;
$(window).resize(function() {
// Contrôle du changement de mode paysage/portrait
if (document.documentElement.clientHeight == originalWidth &&
document.documentElement.clientWidth == originalHeight) {
originalHeight = document.documentElement.clientHeight;
originalWidth = document.documentElement.clientWidth;
}
// Vérifiez si la hauteur disponible est plus petite (le clavier est affiché) afin de masquer le pied de page.
if (document.documentElement.clientHeight < originalHeight) {
$('.footer').hide();
} autre {
$('.footer').show();
}
});

Voici comment j'ai résolu ce problème :

tab.ts

import { Component, ElementRef, Renderer, ViewChild } from '@angular/core';
import { Events, Tabs } from 'ionic-angular';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  @ViewChild('myTabs') tabRef: Tabs;
  mb: any;
  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor(private elementRef: ElementRef, private renderer: Renderer, private event: Events) {

  }
  ionViewDidLoad() {
    let tabs = this.queryElement(this.elementRef.nativeElement, '.tabbar');
    this.event.subscribe('hideTabs', () => {
      this.renderer.setElementStyle(tabs, 'display', 'none');
      let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
      let content = this.queryElement(SelectTab, '.scroll-content');
      this.mb = content.style['margin-bottom'];
      this.renderer.setElementStyle(content, 'margin-bottom', '0')
    });
    this.event.subscribe('showTabs', () => {
      this.renderer.setElementStyle(tabs, 'display', '');
      let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
      let content = this.queryElement(SelectTab, '.scroll-content');
      this.renderer.setElementStyle(content, 'margin-bottom', this.mb)
    })
  }
  queryElement(elem: HTMLElement, q: string): HTMLElement {
    return <HTMLElement>elem.querySelector(q);
  }
}

page.ts spécifique

import { Component } from '@angular/core';
import { NavController, Events } from 'ionic-angular';

import { Keyboard } from '@ionic-native/keyboard';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private event: Events, private keyboard: Keyboard) {

  }
  ionViewDidLoad() {
    this.keyboard.onKeyboardShow().subscribe(() => this.event.publish('hideTabs'));
    this.keyboard.onKeyboardHide().subscribe(() => this.event.publish('showTabs'));
  }
}

crédits à dPary

J'espère vraiment que vous effectuez tous des tests de périphériques appropriés, car toutes ces solutions qui masquent les onglets entraînent un nouveau rendu de la vue sur les périphériques, ce qui provoquera un scintillement très visible et, dans certains cas, des blocages. Quoi qu'il en soit, tout le meilleur.

Ouais, je suis avec @cozzbie, tout ça ne sont que des hacks. Il nous faut une vraie solution officielle par l'équipe @ionitron @manucorporat

+1 Nous avons besoin d'une solution officielle, aucun de ces correctifs n'est idéal pour une utilisation en production.

La version actuelle d'ionic le fait toute seule

21 Nis 2017 17:12 tarihinde "Ruben Callewaert" [email protected]
yazdô :

+1 Nous avons besoin d'une solution officielle, aucun de ces correctifs n'est idéal pour
utilisation de la production.

-
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/driftyco/ionic/issues/7047#issuecomment-296201358 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AVskkCpgFZZRbrd56ILc5nIPZICRTclUks5ryLlCgaJpZM4I-H1S
.

Est-ce vraiment pris en charge. Je vois toujours la barre d'onglets. Exécution de la dernière version comme sur cette écriture ionic-angular 3.2.0.

Cela fonctionnait très bien avec la version 2.xx mais maintenant j'ai vérifié la version 3.xx
il y a quelque chose qui ne va pas .il ne cache pas ce que vous voulez sur l'écran jusqu'à ce que
en tapant sur le clavier. Malheureusement, nous avons trouvé une autre solution ou déclassée
votre version ionique à n'importe quel 2.xx

12 mai 2017 ÖÖ 3:32 tarihinde "vazad28" [email protected] yazdı:

Est-ce vraiment pris en charge. Je vois toujours la barre d'onglets. Exécution la plus récente
version comme sur cette écriture ionique-angulaire 3.2.0.

-
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/driftyco/ionic/issues/7047#issuecomment-300952251 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AVskkNkEdzsMkkrhGW0l9OUW2BKly-PSks5r46ingaJpZM4I-H1S
.

Juste une pensée ici. Le fait de masquer les onglets à l'aide de l'un des hacks ci-dessus entraîne l'actualisation de la vue sur les appareils, alors que diriez-vous de simplement laisser tomber la hauteur de la zone d'onglet à zéro au lieu de la masquer ? Juste une idée mais je suis trop impliqué en ce moment pour l'essayer.

+1 pour un correctif officiel ! Les approches " display: none " provoquent un scintillement inacceptable, et les onglets s'affichent une fois puis disparaissent... semble grossier et hacky. (quelqu'un a une idée de comment se débarrasser du scintillement? Je ne suis pas au-dessus d'un hack si cela semble bon pour l'utilisateur)

Du nouveau sur ce problème ? j'attends toujours un correctif officiel avant de perdre espoir et de commencer à mettre en œuvre quelque chose qui affecterait la qualité de l'interface utilisateur

@patrickmcd , Le seigneur des pouces vers le bas, vous vous demandez juste d'avoir essayé d'arrêter cette habitude ?

@ viking2917 vous pouvez essayer le hack que j'ai suggéré et essayer de forcer la hauteur des onglets à zéro. Cela pourrait fonctionner. Je ne l'ai pas encore essayé cependant.

Malheureusement, masquer les onglets avec CSS causera un certain nombre de problèmes. Ionic calcule quelques valeurs comme la marge sur ion-content et prend en compte la présence des onglets (qui sont masqués).

Nous avons dû supprimer la solution car des problèmes de positionnement avec d'autres composants sont survenus.

@Khalid-Nowaf Je n'apprécie tout simplement pas les commentaires de spam qui font perdre du temps à l'équipe Ionic et aux ~ 2000 observateurs de ce référentiel.

Le commentaire de @Floyd1256 est un spam inconsidéré. Cela n'ajoute rien à la conversation. C'est juste un autre commentaire "plus un / sommes-nous encore là" qui ne sert qu'à remplir nos boîtes de réception.

Mes votes négatifs sont des tentatives pour pousser les autres à adopter un comportement plus attentionné. Avant de commenter, rappelons-nous que nous avons une conversation avec ~2000 personnes _dont le temps est précieux_ . Nous ne devrions pas traiter cet espace avec autant de désinvolture que nous le ferions avec une conversation instantanée personnelle avec des amis. Nous devons nous demander si notre commentaire aidera ou gênera les autres, s'il fait avancer la conversation ou n'est que du bruit, s'il est vraiment nécessaire de le dire ou pourrait mieux être exprimé avec une réaction Github , et s'il accélérera ou ralentira le développement.

Il semble y avoir une branche traitant de ce problème avec d'autres https://github.com/ionic-team/ionic/tree/keyboard-fixes
Ce commit en particulier semble très prometteur

Je n'ai pas le courage d'aller plus loin que ionic v1.

Je fais ce patch (j'ai mis un contrôleur de vue affecté, car je n'en ai qu'un avec ce combo).

/* HACK Al mostrar el teclado el tabbar se pone encima de él en android /var bottom_stored=0;window.addEventListener('native.keyboardshow', fonction (e) {angular.element(document.getElementsByClassName('tab-nav')).addClass('hide');bottom_stored = angular.element(document.getElementsByClassName('has-tabs')).css('bottom');angular.element(document.getElementsByClassName('has-tabs')).css('bottom','0px');$portée.$apply();});window.addEventListener('native.keyboardhide', fonction (e) {angular.element(document.getElementsByClassName('tab-nav')).removeClass('hide');angular.element(document.getElementsByClassName('has-tabs')).css('bottom',bottom_stored);$portée.$apply();});/ PIRATER */

cela marche

Dans mon cas, cela ne se produit que lorsque j'utilise Android, la meilleure solution est de modifier une propriété sur la balise Android dans config.xml

<platform name="android"> <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity"> <activity android:windowSoftInputMode="adjustPan" /> </edit-config>

Ajoutez simplement les lignes suivantes, de sorte que la version Android dans AndroidManifest.xml ait le paramètre AdjustPan dans android:windowSoftInputMode , cela entraînera que le clavier recouvre tout le contenu au lieu de pousser l'écran vers le haut.

Pour l'approche de @Jatapiaro expliquée plus haut, j'ai installé le plugin cordova suivant :

cordova plugin add cordova-custom-config

Ensuite, je viens d'ajouter ce qui suit à mon config.xml

<platform name="android">
    <preference name="android-manifest/application/activity/<strong i="10">@android</strong>:windowSoftInputMode" value="adjustPan" />
    ...
</platform>

Travailler sur Android et iOS

Voici ce que j'ai fait pour masquer le clavier dynamiquement :

dans mon fichier TS :

@ViewChild('foot') foo_ter: ElementRef;
  constructor(private platform: Platform, private keyboard: Keyboard) {
    this.platform.ready().then(() => {
      this.keyboard.onKeyboardShow().subscribe(() => {
        this.foo_ter.nativeElement.hidden = true;
      });
      this.keyboard.onKeyboardHide().subscribe(() => {
        this.foo_ter.nativeElement.hidden = false;
      });
    });
  }

puis dans mon fichier HTML, je crée une variable de modèle appelée

<ion-footer no-border style="padding:5%;" #footer>
  <ion-item no-lines>
   Don't have an account?
    <button ion-button style="text-align:center;" bold item-end clear no-lines clear (click)="signup()">
      Sign Up
    </button>
  </ion-item>
</ion-footer>

J'espère que cela fonctionnera pour vous aussi :-) @RaymondAtivie

Je l'ai donné de cette façon dans Ionic V3. Fonctionne parfaitement bien.
fichier TS
ionViewDidEnter() {
si (ce.clavier.isOpen())
this.showTabs = false;
autre
this.showTabs = vrai;
}

fichier HTML

dasda

asd

pas vraie réponse

Y a-t-il une mise à jour sur la solution officielle pour cela?

A partir d'aujourd'hui.. avec Ionic v
Je n'ai pas pu faire fonctionner @ionic-native/keyboard. Comme beaucoup d'autres l'ont dit, l'événement onKeyboardShow() ne se déclenche jamais.
Cordova-keyboard-plugin a également été déprécié.

Donc ce qui a fonctionné pour moi c'est...
cordova plugin add cordova-plugin-ionic-keyboard --save
postez ceci .. J'ai ajouté window.addEventListener comme décrit dans leur readme

n'oubliez pas de supprimer l'écouteur d'événement au cas où vous quitteriez la page d'onglet et y reviendrez.

```` tapuscrit
// MesTabs.ts
showListener() {
console.log('clavier visible');
document.body.classList.add('keyboard-is-open');
}
hideEcouteur() {
console.log('le clavier se cache');
document.body.classList.remove('le clavier est ouvert');
}

ionViewDidEnter() {
window.addEventListener('keyboardWillShow', this.showListener);
window.addEventListener('keyboardDidHide', this.hideListener);
}

ionViewWillLeave() {
window.removeEventListener('keyboardWillShow', this.showListener);
window.removeEventListener('keyboardDidHide', this.hideListener);
}
````

Au début à travaillé pour moi. Lorsque je clique pour la première fois sur une entrée lorsque le clavier est affiché, la barre d'onglets était masquée. Après avoir cliqué sur une autre entrée, la barre d'onglets s'est à nouveau affichée. Donc, dans mon cas, la barre d'onglets n'a été masquée que lorsque je clique d'abord sur le champ de saisie.

Toute suggestion? @dharapvj

Salut tout le monde, bien que ce ne soit pas la même chose que "masquer" la barre d'onglets, cette solution a bien fonctionné pour moi en permettant au clavier d'obscurcir la barre d'onglets au lieu de la pousser vers le haut.

Dans votre config.xml principal, modifiez la plate-forme Android pour inclure les éléments suivants :

    <platform name="android">
        ...
        <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
            <activity android:windowSoftInputMode="adjustPan" />
        </edit-config>
    </platform>

Cela modifie la valeur par défaut que Cordova écrit dans votre AndroidManifest.xml pour contrôler le comportement global de saisie du clavier pour votre application.

... et si vous vérifiez AndroidManifest.xml sur votre prochaine version, vous verrez que la valeur par défaut de android:windowSoftInputMode= "adjustResize" est changée en "adjustPan", permettant ainsi à la barre d'onglets d'être masquée.

@codymbeardsley Merci beaucoup ! Cette solution fonctionne pour moi ; au moins pour Android c'est une bonne solution. Lorsque le clavier est ouvert, au lieu d' appuyer sur la barre d'outils , le clavier masque simplement

Fonctionne parfaitement !
Merci @codymbeardsley

Merci pour le problème ! Ce problème est verrouillé pour empêcher les commentaires qui ne sont pas pertinents pour le problème d'origine. Si le problème persiste avec la dernière version d'Ionic, veuillez créer un nouveau problème et vous assurer que le modèle est entièrement rempli.