Ionic-framework: Tabs automatisch ausblenden, wenn die Tastatur geöffnet ist

Ja, ich gehe davon aus, dass Sie unter Android sind. Das alte Tastaturproblem...

Ich habe in der PhoneGap conf von @tlancina einen Vortrag über die Tastatur gesehen und es scheint im Allgemeinen ein ziemlich schwieriges Thema zu sein!
Ich kann bestätigen, dass die untere Tab-Leiste beim Öffnen der Tastatur in meiner App auch unter Android nach oben gedrückt wird. Aber viel schlimmer ist es, Eingabefelder abzudecken, die sich in der Nähe des unteren Randes befinden. Tim meinte, man sollte versuchen das zu vermeiden, aber leider gibt es in meinem Projekt lange Listen zu bearbeiten.
Ich habe das gesamte Keyboard-Thema verschoben, um abzuwarten, wie es sich in ionic abspielt.

Außerdem, @tlancina , gibt es ein Best-Practice-Tutorial zur Verwendung der Tastatur in ionic (Integration des ionischen Tastatur-Plugins, Init/Setzen von Ereignishandlern)?

Ich erlebe dieses Problem auch.

Das gleiche Problem haben wir auch in unserem Projekt. Gibt es diesbezüglich Pläne?

Hey Leute, ich spüre auch den Schmerz - gibt es zufällig Neuigkeiten?

Außerdem bräuchte man diese tolle Funktion, Tabs und eventuell sogar Header schön ausblenden zu können.

@jgw96 Mir ist aufgefallen, dass Sie das Verbesserungsetikett hinzugefügt haben. Da sich native Apps nicht gleich verhalten (Tabs über die Tastatur verschieben) und die Tabs auch die tatsächliche Inhaltsfläche auf nur ein paar Zeilen beschränken, insbesondere auf kleineren Telefonen, sollte dies nicht als ernsteres Problem angesehen werden?

Für Leute, die nach einer vorübergehenden Lösung suchen, habe ich Folgendes getan:

TabsComponent-Konstruktor:

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

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

Innerhalb des CSS:

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

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

Dies funktioniert nicht, wenn Sie mehrere Registerkarten auf einer Seite haben, aber ich denke, Sie können sie direkt mit Ihrem CSS auswählen.

Ich verwende derzeit Ionic Beta 11

Gibt es hierzu Neuigkeiten?

@bvx89 Danke.
Für diejenigen auf Rc0 gibt es eine kleine Änderung in der CSS

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

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

Noch keine offizielle Lösung

Nur um zu erwähnen, dass das Aktivieren des Vollbildmodus auf Android dieses Problem auch für mich behebt.
Dies kann durch die Einstellung
<preference name="Fullscreen" value="true" />
in config.xml und optional das Hinzufügen von cordova-plugin-fullscreen, wenn Sie eine ältere Cordova-Android-Plattform als v5.0.0 verwenden.

Wird dies in der nächsten Version zusammen mit den restlichen Tastaturproblemen behoben, die behoben werden (lesen Sie etwas über Tastaturprobleme in einem anderen Thread) oder ist dies zwischen die Risse gefallen?

@RaymondAtivie
Ich habe das gleiche Problem, wird das in der nächsten Version behoben?

In RC3 funktioniert es bei mir nicht.
die onKeyboardShow() wird nie ausgelöst...

+1， Ich habe das gleiche Problem.

Cordova CLI: 6.3.1
Ionische CLI-Version: 2.1.8
Ionic App Lib Version: 2.1.4
ios-deploy-Version: Nicht installiert
ios-sim-Version: Nicht installiert
Betriebssystem: Windows 8.1
Knotenversion: v6.4.0
Xcode-Version: Nicht installiert

Ich habe das gleiche Problem und die von @RaymondAtivie gepostete
box-shadow: none; border-top: none;
und enden immer noch mit dem gleichen oberen Rand, der von der Tableiste aus sichtbar ist. Irgendwelche Ideen?

Ich habe dieses Problem gelöst, indem ich die Option fullscreen="true" ion-content fullscreen="true" turning
und Einstellen des versteckten Stils für die Tableiste

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

Ich habe dies versucht und habe immer noch den gleichen oberen Rand, obwohl die Tableiste auf "false" eingestellt ist.

@payneBrandon Ich verstecke die obere Leiste
<ion-header *ngIf="isShowHeader()">

Mein Ionen-Tab befindet sich unten, das Ausblenden des Headers hat also keinen großen Einfluss darauf. Ich habe einen Screenshot von dem, was ich meine, angehängt. Die Tastatur wird angezeigt, die Registerkarten unten sind ausgeblendet, aber es scheint immer noch eine obere Grenze zu geben, die an Ort und Stelle bleibt, wenn ich herumscrolle.

dieser Balken sieht aus wie ein Teil des Formulars
kannst du deinen html-code teilen?

Endlich herausgefunden. Ich musste mir keine Sorgen um eine Kopfzeile machen, da sich meine Registerkarten unten befinden, ABER ich musste auf die Fußzeile achten (duh!). Ich habe eine bedingte Klasse auf die Fußzeile angewendet, um sie auszublenden, wenn der Textkörper die Tastatur-ist-offen-Klasse und BAM hat, wieder im Geschäft. Danke für die Hilfe!

@payneBrandon viel Glück

Würde diese Funktion auch gerne sehen.
Außerdem denke ich, dass ion-footer die Sichtbarkeit beim Öffnen/Schließen der Tastatur unterstützen sollte

Ich habe eine einfache Lösung vorgenommen (natürlich nicht ideal). Das .scroll-content hat ein margin-bottom von 56px , die gleiche Höhe haben die Tabs. Ich suche nach der Tastatur:

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

und hängen Sie diese Klasse dann an ion-content , ein Elternteil von .scroll-content :

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

und füge dies zu ion-content :

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

Ich habe die Registerkarten auch ausgeblendet, wenn die Tastatur geöffnet ist, und zwar mit der gleichen Methode in tabs.html :

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

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

Ich habe dies nur für die Seite getan, für die ich den Fix benötigte.

Arbeiten in iOS und Android.

GELÖST

Dies ist eine richtige Lösung, außer mit CSS-Markierung.

```
import { Component } from '@angular/core';
importiere {Keyboard} von 'ionic-native'
import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';

@Komponente({
templateUrl: 'tabs.html'
})
Exportklasse TabsPage {
// Dies teilt der Tabs-Komponente mit, welche Seiten
// sollte die Stammseite jedes Tabs sein
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab3Root: any = Kontaktseite;
valueforngif=true;

Konstruktor (öffentliche Tastatur: Tastatur) { }
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 , obwohl Sie es nicht im Konstruktor angeben müssen.

Dies führt dazu, dass sich meine Tastatur beim Öffnen automatisch schließt... Liegt das daran, dass der Fokus zu den Registerkarten zurückkehrt, um sie auszublenden, was wiederum die Tastatur schließt?

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

@ bvx89 Ihre Lösung ist die einzige, die ich mit Ionic

Ich habe das gleiche Problem @Killmore
gibt es dafür noch keine offizielle lösung?

Hallo
Die obige Lösung läuft auch auf Ionic 2.1.0, aber ein besseres Ergebnis [hidden] attrb kann anstelle von * ngif verwendet werden. Ich verwende diese Lösung in meinem Projekt, es funktioniert gut

Einen schönen Tag noch

Oben wird auf einigen Android-Geräten ein Flackern verursachen und ist wirklich eine schlechte Option.

Das wird funktionieren .. versuchen Sie dies

var originalHeight = document.documentElement.clientHeight;
var originalWidth = document.documentElement.clientWidth;
$(Fenster).resize(Funktion() {
// Quer-/Hochformat-Modus-Schalter steuern
if (document.documentElement.clientHeight == originalWidth &&
document.documentElement.clientWidth == originalHeight) {
originalHeight = document.documentElement.clientHeight;
originalWidth = document.documentElement.clientWidth;
}
// Überprüfen Sie, ob die verfügbare Höhe kleiner ist (Tastatur wird angezeigt), damit wir die Fußzeile ausblenden.
if (document.documentElement.clientHeight < originalHeight) {
$('.Fußzeile').hide();
} anders {
$('.Fußzeile').show();
}
});

So habe ich dieses Problem gelöst:

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

spezifische page.ts

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

Gutschriften an dPary

Ich hoffe wirklich, dass Sie alle ordnungsgemäße Gerätetests durchführen, da all diese Lösungen, die Registerkarten ausblenden, dazu führen, dass die Ansicht auf Geräten neu gerendert wird, was zu einem sehr sichtbaren Flimmern und in einigen Fällen zum Absturz führt. Wie auch immer, alles Gute.

Ja, ich bin bei @cozzbie, das alles sind nur ein paar Hacks. Wir brauchen eine echte offizielle Lösung vom Team @ionitron @manucorporat

+1 Wir brauchen eine offizielle Lösung, keine dieser Fixes ist ideal für den Produktionseinsatz.

Die aktuelle Version von ionic macht es von selbst

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

+1 Wir brauchen eine offizielle Lösung, keine dieser Korrekturen ist ideal für
Produktion nutzen.

—
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/driftyco/ionic/issues/7047#issuecomment-296201358 ,
oder den Thread stumm schalten
https://github.com/notifications/unsubscribe-auth/AVskkCpgFZZRbrd56ILc5nIPZICRTclUks5ryLlCgaJpZM4I-H1S
.

Ist das wirklich beachtet worden. Ich sehe immer noch die Tab-Leiste. Laufende neueste Version wie in diesem Schreiben ionic-angular 3.2.0.

Es funktionierte sehr gut mit der 2.xx-Version, aber jetzt habe ich die 3.xx-Version überprüft
es stimmt etwas nicht. Es versteckt nicht, was Sie auf dem Bildschirm wollen, bis
Tippen auf der Tastatur. Leider haben wir eine andere Lösung gefunden oder herabgestuft
unsere ionische Version zu jedem 2.xx

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

Ist das wirklich beachtet worden. Ich sehe immer noch die Tab-Leiste. Laufen neueste
Version wie auf diesem Schreiben ionic-angular 3.2.0.

—
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/driftyco/ionic/issues/7047#issuecomment-300952251 ,
oder den Thread stumm schalten
https://github.com/notifications/unsubscribe-auth/AVskkNkEdzsMkkrhGW0l9OUW2BKly-PSks5r46ingaJpZM4I-H1S
.

Hier nur ein Gedanke. Das Ausblenden der Registerkarten mit einem der oben genannten Hacks führt dazu, dass die Ansicht auf Geräten aktualisiert wird. Wie wäre es also, wenn wir die Höhe der Registerkartenzone einfach auf Null reduzieren, anstatt sie auszublenden? Nur so ein Gedanke, aber ich bin gerade zu beschäftigt, um es auszuprobieren.

+1 für einen offiziellen Fix! Die " display:none "-Ansätze verursachen inakzeptables Flackern, und die Tabs verschwinden einmal und verschwinden dann ... sieht eklig und hackig aus. (Hat jemand eine Idee, wie man das Flimmern los wird? Ich bin nicht über einem Hack, wenn es für den Benutzer gut aussieht)

Gibt es etwas Neues zu diesem Thema? Ich warte immer noch auf eine offizielle Lösung, bevor ich die Hoffnung verliere und etwas implementiere, das die Qualität der Benutzeroberfläche beeinträchtigen würde

@patrickmcd , The Lord of The Thumbs Down, ob du versucht hast, diese Gewohnheit

@viking2917 Sie könnten den von mir vorgeschlagenen Hack ausprobieren und versuchen, die Höhe der Registerkarten auf Null zu erzwingen. Das könnte funktionieren. Ich habe es aber noch nicht probiert.

Leider führt das Ausblenden der Registerkarten mit CSS zu einer Reihe von Problemen. Ionic berechnet einige Werte wie die Marge auf ion-content und berücksichtigt das Vorhandensein der Registerkarten (die ausgeblendet sind).

Wir mussten die Lösung entfernen, da einige Positionierungsprobleme mit anderen Komponenten auftraten.

@Khalid-Nowaf Ich schätze einfach keine Spam-Kommentare, die dem Ionic-Team und den ~2000 Beobachtern dieses Repositorys Zeit rauben.

Der Kommentar von

Meine Downvotes sind Versuche, andere zu einem rücksichtsvolleren Verhalten zu bewegen. Bevor wir einen Kommentar abgeben , sollten wir uns daran erinnern, dass wir ein Gespräch mit ~2000 Leuten führen, Github-Reaktion ausgedrückt werden könnte und ob er die Entwicklung beschleunigt oder verlangsamt.

Es scheint einen Zweig zu geben, der dieses Problem zusammen mit einigen anderen anspricht https://github.com/ionic-team/ionic/tree/keyboard-fixes
Besonders dieser Commit sieht sehr vielversprechend aus

Ich habe nicht den Mut, mehr als ionic v1 zu gehen.

Ich mache diesen Patch (ich habe einen Controller der betroffenen Ansicht eingefügt, da ich nur einen mit dieser Combo habe).

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

das funktioniert

In meinem Fall passiert dies nur, wenn ich Android verwende. Die beste Lösung besteht darin, eine Eigenschaft des Android-Tags in config.xml zu ändern

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

Fügen Sie einfach die folgenden Zeilen hinzu, damit der Android-Build in der AndroidManifest.xml das adjustPan in android:windowSoftInputMode hat. Dies führt dazu, dass die Tastatur den gesamten Inhalt überlagert, anstatt den Bildschirm nach oben zu verschieben.

Für den oben erläuterten Ansatz von

cordova plugin add cordova-custom-config

Dann habe ich gerade folgendes zu meiner config.xml hinzugefügt

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

Arbeiten an Android & iOS

Folgendes habe ich getan, um die Tastatur dynamisch auszublenden:

in meiner TS-Datei:

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

Dann erstelle ich in meiner HTML-Datei eine Vorlagenvariable namens #footer, auf die ich im obigen TS wie

<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>

Ich hoffe, es funktioniert auch bei dir :-) @RaymondAtivie

Ich habe es so in Ionic V3 gegeben. Funktioniert einwandfrei.
TS-Datei
ionViewDidEnter() {
if (this.keyboard.isOpen())
this.showTabs = false;
anders
this.showTabs = true;
}

HTML-Datei

dasda

asd

keine wahre antwort

Gibt es dafür ein Update zur offiziellen Lösung?

Ab heute.. mit Ionic v
Ich konnte @ionic-native/keyboard nicht zum Laufen bringen. Wie viele andere schon sagten, wird das Ereignis onKeyboardShow() nie ausgelöst.
auch Cordova-Keyboard-Plugin ist veraltet.

Was also bei mir funktioniert hat, war...
cordova plugin add cordova-plugin-ionic-keyboard --save
post this.. Ich habe window.addEventListener hinzugefügt, wie in ihrer Readme beschrieben

Vergessen Sie nicht, den Eventlistener zu entfernen, falls Sie die Registerkarte verlassen und wieder darauf zurückkommen.

````Typoskript
// MyTabs.ts
showListener() {
console.log('Tastatur sichtbar');
document.body.classList.add('keyboard-is-open');
}
hideListener() {
console.log('Tastatur versteckt sich');
document.body.classList.remove('keyboard-is-open');
}

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

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

Hat zuerst bei mir funktioniert. Wenn ich zum ersten Mal auf eine Eingabe klicke, wenn die Tastatur angezeigt wird, war die Tableiste ausgeblendet. Nachdem ich auf einen anderen Eingang geklickt habe, wird die Tabbar wieder angezeigt. In meinem Fall wurde die Tabbar also nur ausgeblendet, wenn ich zuerst auf das Eingabefeld klicke.

Irgendein Vorschlag? @dharapvj

Hallo zusammen, obwohl es nicht dasselbe ist wie das "Verstecken" der Tab-Leiste, hat diese Lösung für mich gut funktioniert, indem die Tastatur die Tab-Leiste verdeckt, anstatt sie nach oben zu drücken.

Bearbeiten Sie in Ihrer Haupt-config.xml die Android-Plattform, um Folgendes einzuschließen:

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

Dadurch wird der Standardwert geändert, den Cordova in Ihre AndroidManifest.xml schreibt, um das globale Tastatureingabeverhalten für Ihre App zu steuern.

...und wenn Sie AndroidManifest.xml bei Ihrem nächsten Build überprüfen, werden Sie feststellen, dass die Standardeinstellung von android:windowSoftInputMode= "adjustResize" in "adjustPan" geändert wurde, wodurch die Registerkartenleiste verdeckt werden kann.

@codymbeardsley Vielen Dank! Diese Lösung funktioniert für mich; zumindest für android ist es eine gute lösung. Wenn die Tastatur geöffnet ist, blendet die Tastatur nur die Fußzeile aus , anstatt die Symbolleiste zu drücken !

Funktioniert perfekt!
Danke @codymbeardsley

Danke für das Problem! Dieses Problem wird gesperrt, um Kommentare zu verhindern, die für das ursprüngliche Problem nicht relevant sind. Wenn dies immer noch ein Problem mit der neuesten Version von Ionic ist, erstellen Sie bitte ein neues Problem und stellen Sie sicher, dass die Vorlage vollständig ausgefüllt ist.