Ionic Android Keyboard Probleme

Ich bin neu in ionischen. Ich fing an, meine App zu entwerfen und zu entwickeln, aber ich bekam sehr bald ein Problem. Ich weiß nicht wirklich, wie das iPhone funktioniert, weil ich das nur auf meinem Android-Gerät teste.Ionic Android Keyboard Probleme

In meiner App verwende ich die Starter Tabs Vorlage mit einer Kopfzeile oben, Tabs unten. In einer meiner Nav-Ansichten habe ich einen festen Kontrollbereich, einen scrollbaren Bereich und einen festen schmalen Eingabebereich. Im Folgenden ist eine einfache Beschreibung meines App-Layouts:

Das Problem, das ich mit Blick auf bin hier, wenn ich für die Eingabe auf den Eingabebereich klicken, wird die Android-Tastatur erscheint, meinen Scroll-Bereich drücken, Eingang Bereich und Laschen nach oben, so dass mein Bildschirm würde wie folgt aussehen:

diese im Grunde "Marmelade" my app Aussehen. So kam ich zu denken, wie andere damit umgegangen sind. Vom googlen fand ich, dass ich Sachen verstecken konnte, wenn Tastatur aktiv ist, indem ich "Versteck-auf-Tastatur-offen" -Klasse zu meinem div s gebe, aber das würde nur display: none während noch seine Breite, Höhe und Stelle halten.

Meine Frage ist, gibt es irgendwelche Möglichkeiten, meine Elemente buchstäblich zu "entfernen", wenn meine Tastatur geöffnet ist und sie "wiederherzustellen", wenn meine Tastatur geschlossen ist? Ich habe versucht,

window.addEventListener('native.keyboardshow', function(){ 
    document.body.classList.add('keyboard-open'); 
}); 

if(angular.element(document.querySelector("body")).hasClass("keyboard-open")) { 
    angular.element(document.querySelector("div.tab-nav.tabs").remove()); 
}

keyboard-open Klasse zu meinem Körper Element hinzufügen und meine Tabs löschen (obwohl ich glaube, sollte ich die Tabs' Klassenänderungen für die remove() Aktion überwachen, damit es funktioniert, aber ich fand nur jQuery Wege tu es und ich glaube das ist gegen die Regeln von angularJS?) aber es hat nicht funktioniert.

Also, was sind die üblichen Möglichkeiten, damit umzugehen? Während ich darüber nachdachte, glaube ich, dass das Entfernen und Wiederherstellen bestimmter Elemente oder, ob es möglich ist oder nicht, eine Tastatur auf dem Körperelement (genau wie Z-Index-Unterschiede) nicht wirklich eine schöne Erfahrung sein würde.

Vielen Dank im Voraus für Hilfe.

Quelle

2016-05-26 ohnu93

Wenn Sie nicht etwas gefunden haben dann versuchen Sie http://codepen.io/anon/pen/JXwGWJ – Atula

@Atula Thx für Ihren Vorschlag, aber Ihr Vorschlag ist Seitenmenü anstelle von Tabs richtig? Aber ich glaube wirklich nicht, dass es meine Frage beantwortet, da dies immer noch Probleme mit meinem Scroll- und Eingabebereich verursachen würde, der beim Öffnen der Tastatur verkrampft wird. Irgendwelche Vorschläge, wie Sie das vermeiden können? (Bitte sehen Sie sich die grobe Skizze meiner App-Layout oben an.) – ohnu93

Nun, es ging nicht um Sidemenu oder Tab. es war, wie man die Tastatur repariert. Aber vielleicht hat es nicht für dich funktioniert. – Atula

Ich löste dies durch "Entfernen" und "Wiederherstellen" meines Inhalts als yurinondual schlägt in this link from ionic forum vor.

Der Vorschlag war über CSS-Manipulation:

.keyboard-open .tabs{ 
    display:none; 
} 
.keyboard-open .has-tabs{ 
    bottom:0; 
} 
body.keyboard-open .has-footer{ 
    bottom: 0; 
}

Quelle

2016-05-27 06:46:25 ohnu93

Nun, es ist nie zu spät, eine Antwort zu senden. Ich habe es geschafft, dieses Problem basierend auf einigen dieser Antworten zu lösen.

Meine Lösung:

Index.HTML Added a ng-Klasse Hören auf die showTabs zuschreiben.

.is-keyboard-open .tabs{ 
    display:none; 
} 
.is-keyboard-open .has-tabs{ 
bottom:0; 
}

App

<body ng-app="app" ng-cloak ng-class="{ 'is-keyboard-open': showTabs }">

style.css addierten folgende Schnipsel so die Laschen bei Tastatur
offen versteckt sind.js Auf app.js, in der app.run-Methode, habe ich die window.eventListener der native.keyboardshow hinzugefügt und ausblenden, um in Echtzeit zu zielen, wenn die Tastatur ausgelöst oder ausgeblendet wird.

Beachten Sie, dass ich IsAndroid() verwendet, weil ich nur dieses Problem in Android hatte.

$rootScope.showTabs = true; 
    if(ionic.Platform.isAndroid()){ 
     window.addEventListener('native.keyboardshow', keyboardShowHandler); 
     window.addEventListener('native.keyboardhide', keyboardHideHandler); 

     function keyboardShowHandler(e){ 
     $rootScope.showTabs = true; 
     } 

     function keyboardHideHandler(e){ 
      $rootScope.showTabs = false; 
     } 
    }

Jetzt funktioniert alles wie es soll.

Anmerkungen: Ich habe versucht, vorher: - fügen Sie mehr Z-Index @ .tabs - die .tabs über CSS-Ziel nur - position: fixed + bottom: 0 @ Tabs - viele Antworten auf ionischen Foren und Stapelüberlauf

Dies war die beste Lösung, die ich fand.

PS: Upvoted diese, weil ich einige weiße Haare gewonnen habe, die versuchen, es richtig zu lösen.

Quelle

2016-12-21 16:36:31

Ionic Android Keyboard Probleme

Antwort

Verwandte Themen