Ionic-framework: Problem(Formulare): Eingabe, Scrollen, Tastaturprobleme für Formulare

@dylanvdmerwe Das ist großartig, danke für die Zusammenstellung! Was die Verwendung der Schaltflächen "Weiter" und "Zurück" betrifft, um die Eingaben nach oben und unten zu verschieben, sollte dies funktionieren, aber möglicherweise ist kürzlich etwas kaputt gegangen.

Gilt auch für Autovervollständigung und Autokorrektur, standardmäßig sind sie deaktiviert, es sei denn, sie werden speziell dem Element hinzugefügt: https://github.com/driftyco/ionic/blob/2.0/ionic/components/input/input-base.ts #L217

Denkst du, dass die automatische Großschreibung auch standardmäßig deaktiviert sein sollte?

@adamdbradley

• Ich kann die Tastaturtasten auf iOS nicht dazu bringen, zwischen den verschiedenen Eingaben zu wechseln. Sie werden "verwirrt" und die Tastatur schließt sich schließlich einfach. Muss noch auf Android testen, wenn ich mit anderen Tastaturen teste, die diese Tasten haben.
• Nicht sicher, was für die Standardeinstellungen für Autovervollständigung und Autokorrektur am besten geeignet ist. In iOS sind sie für bestimmte Tastaturtypen standardmäßig aktiviert - aber ich denke, es ist am besten, den Standardregeln von <input> zu folgen?
• Ich werde später einige Permutationen für die automatische Vervollständigung und die automatische Großschreibung testen. Beachten Sie, dass ich dies hier separat protokolliert habe

Bitte beachten Sie, dass ich diese auf tatsächlichen Geräten teste.

@adamdbradley Ich habe die obigen Elemente aktualisiert. Herausragende Dinge sind definitiv reproduzierbare Probleme.

Wo stehen wir bei Android-Ausgabe Nr. 1? Ohne es ist meine App total durcheinander.

+1 zu Android-Problem Nr. 1 :)

Gibt es Bewegungen bei den in dieser Ausgabe aufgeführten Artikeln?

@dylanvdmerwe Sobald die nächste Beta veröffentlicht ist (beta8), werden wir uns darauf konzentrieren, Probleme wie dieses zu beheben. Entschuldigen Sie die Unannehmlichkeiten

+1 zu Android-Problem Nr. 1 :)

+1 zum Android-Problem:

. Beim Auswählen einer Eingabe sollte der gesamte Formularinhalt gescrollt werden, damit das ausgewählte Element nach dem Anzeigen der Tastatur sichtbar ist.

Dies hindert mich daran, vollständig von ionic1 auf ionic 2 zu portieren.
Alles Gute!

Dies hindert mich daran, vollständig von ionic1 auf ionic 2 zu portieren.

Hier gilt das gleiche.

+1 zu Android-Problem Nr. 1
Bitte beheben Sie dies frühestens! Wir haben eine neue App dazu gestartet, möchten aber nicht, dass dieser Fehler ein Deal Breaker ist und uns dazu bringt, zu ionic 1 zurückzukehren!

@adamdbradley , @jgw96 Gibt es momentan eine Problemumgehung ?

Kannst du bitte ein Update geben? Schwer zu demonstrieren, da diese primäre Funktionalität nicht funktioniert...
Vielen Dank!

Auch hierzu würde ich mich über ein Update freuen. Unsere ion-input Elemente werden beim Fokussieren nicht in die Ansicht gescrollt. Wir haben versucht, zu normalen input Elementen zu wechseln, aber das verursacht alle möglichen anderen Probleme. Vielen Dank!

Hallo alle! Ich kann Ihnen versichern, dass wir hart an solchen Themen arbeiten. Sehen Sie dieses Problem hauptsächlich auf iOS oder Android? Oder passiert das bei beiden?

Passiert auf Android, bin mir bei iOS nicht sicher. Im Moment scrollt die Benutzeroberfläche nur nach oben, wenn ich mit der Eingabe beginne, um die Eingabe anzuzeigen. Idealerweise sollte es passieren, sobald fokussiert und die Tastatur auftaucht.

Hi,

Ich sehe mehrere weitere Probleme mit iOS auf dem Gerät (habe nicht auf Android überprüft):

• Bei schwebenden Beschriftungen wird beim Klicken auf eine Eingabe oft vorübergehend eine leere Zeile vor dem Wert angezeigt, wodurch der Wert nach unten springt und die Eingabe vertikal erweitert wird. Bei normalen Labels wird der Wert stattdessen manchmal temporär horizontal verschoben.
• Bei Floating Labels springt das Caret beim Scrollen aus der Eingabe heraus.
• Wenn Sie das Cordova-Tastatur-Plugin verwenden und die Zubehörleiste zum Navigieren zwischen Feldern verwenden, springt manchmal die gesamte Ansicht. Nach dem Setzen von disableScroll(true) funktioniert die nächste Schaltfläche einwandfrei, aber die Zurück-Schaltfläche lässt den Bildschirm immer noch springen. Sie sind sich nicht sicher, ob dies stattdessen dort gemeldet werden soll?

Vielen Dank für die gute Arbeit an Ionic, ich freue mich darauf, die Las Knicks ausgebügelt zu haben!

Gleiches Problem mit Tastatur und Ioneneingabe in Android. Sehr wichtiges Thema bei allen Apps mit Formularen!

Kein Update zu diesem kritischen Problem?

irgendein Update zu diesem Thema?

Würde es lieben, wenn dies in einem kommenden RC betrachtet wird.

Update dazu. #5 für iOS kann ich nicht reproduzieren. Das funktioniert bei mir im Master einwandfrei, kann das jemand bestätigen?

Schau dir jetzt Nummer 1 an.

Ich stehe vor dem gleichen Problem. Gibt es Updates dazu? .

Unter iOS Nr. 1 funktioniert auf großen Bildschirmen (iPad) nicht gut. Die Eingabe wird ganz nach oben gescrollt, während es schön wäre, sie näher an der Tastatur zu haben.

Hi,

Es dauerte einige Zeit, das Problem zu untersuchen, da es auf mehreren Geräten auf unserer Seite auftrat.

Android:

• Sieht gut aus, wenn scrollAssist aktiviert wird
• Immer noch ein Fehler beim Umschalten von einem Ionen-Eingang zum anderen, wenn die Tastatur bereits geöffnet ist (Seitenscrollen zu stark).

iOS:

• Beim ersten Mal scrollt die Seite nicht
• Beim zweiten Mal scrollt die Seite bei jeder Eingabe der Seite genau nach oben
• Wie bei Android, wenn zwischen den Feldern gewechselt wird, wird die Seite zu viel gescrollt.

Nach einiger Suche haben wir herausgefunden, dass scroolView.scrollTo die scrollTop HTML-Eigenschaft verwendet.
Diese Eigenschaft wird durch den theoretischen Wert begrenzt: scrollHeight - clientHeight.

Wir haben gerade die folgenden Zeilen in scroll-view.js (node_modules/ionic-angular/util/) eingefügt:
console.log(fromY + ' =>' + y);
console.log('maximaler theoretischer Wert: ' + (this._el.scrollHeight - this._el.clientHeight));
Und das Problem scheint offensichtlich.

Aus einigen Gründen wird die Tastatur beim Fokussieren des Felds auf Android generiert, bevor nach oben gescrollt wird, sodass der maximale theoretische Wert dem Wert, den wir nach oben scrollen möchten, überlegen ist. Bei iOS ist dies beim ersten Mal nicht der Fall. Der maximale Scroll-Up-Wert ist also eins.

Du bist dran ;)

@EDumdum Wie

Immer noch ein Fehler beim Umschalten von einem Ionen-Eingang zum anderen, wenn die Tastatur bereits geöffnet ist (Seitenscrollen zu stark).

Hallo @adamdbradley

Schritt, um das Beispiel unten zu erstellen. Screenshots stammen vom Emulator, aber wir reproduzieren das gleiche Verhalten auf Geräten. Formular ist hier, um etwas Farbe hinzuzufügen (blau = fokussiertes Feld, rot = anderes Feld).

Schritt zur Reproduktion

• Fokusfeld 2
  https://drive.google.com/open?id=0B6y5VVmSy-NVZ2xZdjFORzctZFE
  Alles ist ok :)
• Fokusfeld 1
  https://drive.google.com/open?id=0B6y5VVmSy-NVT0ZpUmd6RllPeHM
  Sollte nach unten scrollen, anstatt weiter nach oben zu scrollen :(
• Fokusfeld 2
  https://drive.google.com/open?id=0B6y5VVmSy-NVcExibnA5bUJTWUk
  Verdammt...

Schritt zum Erstellen eines Beispiels

• Neues Projekt erstellt (ionic start -v2 myApp) => RC2
• scrollAssist in meinem App-Konstruktor hinzugefügt
  constructor(config: Config, platform: Platform) { config.set('scrollAssist', true); ... }
• Meine home.html & home.ts geändert & ein wenig zu .scss hinzugefügt

<ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> <div class='takePlace'>Bla bla</div> <form novalidate [formGroup]="form"> <ion-item> <ion-input type="tel" pattern="[0-9]{3}" formControlName="dummyField"></ion-input> </ion-item> <ion-item> <ion-input formControlName="dummyField2"></ion-input> </ion-item> </form> </ion-content>

import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { public form: FormGroup; constructor(private formBuilder: FormBuilder) { this.form = this.formBuilder.group({ dummyField: ['', [Validators.required, Validators.pattern('[0-9]{3}')]], dummyField2: ['', [Validators.required, Validators.pattern('[0-9]{3}')]] }); } ngOnInit() { } }

.takePlace { height: 300px; border: 1px solid red; }

nightly build bewegt die Eingabefelder richtig, aber an einigen Stellen, wenn Sie die Zurück-Taste drücken und die Tastatur nach unten rutscht, bleiben die Eingaben dort, wo sie sind (nach oben schieben), sie sollten an die ursprüngliche Stelle kommen.
Zweitens kann ich nicht auf dem Emulator tippen, da er mich zwingt, auf der Bildschirmtastatur zu tippen, und emu zeigt dies nicht an.

@kodeine

Super danke für die Rückmeldung! Ich werde all diese Hinweise für verschiedene Testszenarien verwenden. Ich werde versuchen, bald einen nächtlichen Out zu machen, damit jeder es ausprobieren kann, danke!

@adamdbradley
Ein anderes Szenario, ich war auf einer Seite, auf der ich Eingaben hatte und die Tastatur geöffnet war, ich klickte auf die Schaltfläche Zurück und bemerkte, dass sich die Registerkarten auch oben auf der Tastatur befanden. Vielleicht müssen wir also die Registerkarten hinter der Tastatur behalten.

Verwandte: https://github.com/driftyco/ionic/commit/c4cf9df387da3524d80660fb69037de77553feea

Es funktioniert besser in der Nacht!

Ich habe jedoch einen Fehler gefunden, der durch die letzten Änderungen eingeführt wurde. Wenn Eingang A den Fokus hat und Sie auf Eingang B tippen, wird die Tastatur ausgeblendet und keine der Eingänge hat den Fokus.

Wenn Sie eine Eingabe fokussieren, "springt" sie auch in Position, anstatt einer glatten Scroll-Animation, wie wenn Sie beispielsweise eine Eingabe in Safari fokussieren, ist das beabsichtigt?

BEARBEITEN: Dies verwendet WKWebView. Habe UIWebView nicht getestet.

Ich bin wirklich daran interessiert zu wissen, ob es Unterstützung für die Schaltfläche "Weiter" für Eingaben geben wird.
Es ist ziemlich schwierig für den Benutzer (Android, nicht sicher für ios), die Schaltfläche "Senden / OK" nicht zu drücken, weil sie denkt, dass sie zur nächsten Eingabe gehen würde, anstatt die Formularaktion abzuschließen.

@biesbjerg Können Sie mehr beschreiben, wie Sie diese Probleme wiederherstellen können? Wenn Sie sagen, dass es in Position springt, wird die Kopfzeile dann weggescrollt? Welche Art von Eingabe? Befindet sich die Eingabe oben in der App oder eher unten? Kannst du ein Video des Problems zur Verfügung stellen? Vielen Dank

@adamdbradley Dieses Video zeigt den "Sprung in die Position anstelle eines glatten Scrollens" und zeigt auch einen Fehler, der mir aufgefallen ist, dass, wenn Sie sich auf eine Eingabe konzentrieren und die Hardware-Taste zurück drücken, der Inhalt nicht zurückscrollt.
edit: Gif-Größe geändert.

@adamdbradley Dies ist das Problem mit dem Eingabefokus, bei dem die Tastatur verschwindet, anstatt die

Und das ist auf Android, wo beim Fokus mein Formular einen plötzlichen Sprung macht und die erste fokussierte Eingabe nicht auf dem Bildschirm sichtbar ist:

Hallo @biesbjerg ! Wir haben vor kurzem einen weiteren Nightly veröffentlicht, der einige weitere Korrekturen für das Scrollen der Eingabe enthält. Würde es Ihnen etwas ausmachen, das auszuprobieren? Vielen Dank!

@jgw96 Hallo! Ich habe 2.0.0-rc.3-201611302233 getestet und nichts geändert, daher sind die Gif-Aufnahmen immer noch gültige Probleme.

Danke, dass du @biesbjerg getestet

@jgw96 Los geht's! https://github.com/biesbjerg/6228-ionic-keyboard-issues

Schritte:

1. git clone https://github.com/biesbjerg/6228-ionic-keyboard-issues.git
2. cd 6228-ionic-keyboard-issues
3. npm install
4. mkdir www (Benötigt wegen eines Cordova/Ionischen Fehlers, bei dem www existieren muss oder die Plugin-Installation fehlschlägt)
5. ionic state reset
6. Auf Geräten ausführen

Das im iOS-Video gezeigte Problem ist ein Problem mit UIWebView sowie WKWebView.

Das Android-Problem hat etwas damit zu tun, dass mein Inhalt mit Flexbox vertikal zentriert ist, aber es sollte sich trotzdem normal verhalten.

Hallo @biesbjerg ! Danke für die Repo. Es gibt ein paar weitere Änderungen mit Scroll heute, die dieses Problem beheben könnten. Ich werde diesen Beitrag nach dem Testen mit meinen Ergebnissen aktualisieren.

Hallo @jgw96! Cool! :-)

Touching an area that is not an input dismisses the keyboard.

Ich sehe, dass neben diesem Teil (nun, und anderen Teilen) ein Häkchen steht; Bedeutet das, dass es in der nächsten Version sein wird? Dies wäre großartig für Chat-Anwendungen, die einen Senden-Button in einem <ion-footer> oben auf der Tastatur haben! Dann würde die Tastatur nicht immer geschlossen, nachdem auf die Schaltfläche Senden geklickt wurde

Hallo allerseits. Ich habe auch das gleiche Problem. Und ich beobachte etwas.
Wenn Eingänge nicht ausgewählt sind, haben wir diesen Fall.

Aber wenn wir es auswählen, haben wir dieses hier

Als Ergebnis habe ich diesen schlechten Schritt mit !important . gemacht

Und es funktioniert für mich als Übergangslösung.

Also... die Dinge werden wirklich chaotisch, wenn Sie etwas haben, das Position:Relativ verwendet.

In diesem Beispiel ist das Logo das Element mit relativer Position, und wenn Sie auf die erste Eingabe drücken, sieht es so aus:

Aber das Drücken auf den zweiten Eingang schiebt auch das Logo:

@jgw96 irgendwelche Neuigkeiten zu diesem Thema und zum RC.4 ?

Auch ich hoffe sehr auf Neuigkeiten zu diesem Thema, mein Kunde macht viel Druck 🙉

Die gute Nachricht ist, dass sich Inputs in den neuesten Nightlies viel besser verhalten. Ich denke, viele Leute, darunter auch ich als der ursprüngliche Protokollierer dieses Problems, werden mit den Korrekturen zufrieden sein.

@yannbf , um fair zu sein, Ionic 2 ist immer noch eine Vorabversion.

Ich verstehe das und finde es wirklich vernünftig. Ich hatte nur gehofft, ein Update zu haben, um es weiterzugeben. Ich bin sehr dankbar für das, was das ionische Team geleistet hat.

Wie auch immer, wie kann ich meine aktuelle App mit dieser Nacht testen?

@yannbf npm install ionic-angular<strong i="6">@nightly</strong> --save
und vergessen Sie nicht, Ihre package.json auf angle 2.2.1 . zu aktualisieren

Funktioniert viel besser mit der Nacht! Danke Leute

Hallo alle! Vielen Dank für die Verwendung von Ionic! @biesbjerg und @yannbf , würde es euch etwas ausmachen , auf rc4 zu

@jgw96 Ja, schon gemacht. Es ist viel besser! Vorfreude auf die finale Veröffentlichung 😄

@jgw96 Nach dem Update wurde es viel besser, aber Elemente mit position:absolute oder position:fixed sind immer noch betroffen. Ich konnte mich von dieser Seite mit dem Logo fortbewegen, das ich zuvor gedruckt habe (mit einem anderen Ansatz, wobei die Position absolut entfernt wurde), aber da ich auf der folgenden Seite "Vereinbarungsbedingungen" am Seitenende haben muss, stehe ich immer noch vor dem Problem :

Hier ist der Code:

<div class="agreement-text">
    <p>paragraph's content..</p>
</div>

Und CSS:

.agreement-text {
    position: fixed;
    padding: 10px;
    margin-top: 40px;
    bottom: 0;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    a {
      color: rgb(250, 231, 124);
    }
}

In meinem Fall bleibt das Problem mit der springenden Eingabe auf Android nach dem Update auf RC5 bestehen. Ich habe gerade ein neues Projekt mit der leeren Vorlage gestartet und die ion-input-Komponente aus der Dokumentation in den ion-content kopiert, das Verhalten unten.

Wie Sie sehen, springt jede Komponente außer der ersten.
Für das Protokoll ist dies die Ausgabe des Befehls ionic info .

Cordova CLI: 6.4.0
Ionic Framework-Version: 2.0.0-rc.5
Ionische CLI-Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionische App-Skripte Version: 1.0.0
ios-deploy-Version: Nicht installiert
ios-sim-Version: Nicht installiert
Betriebssystem: Windows 10
Knotenversion: v6.9.2
Xcode-Version: Nicht installiert

@almr193 dieses Verhalten sieht richtig aus. Der Bildschirm scrollt, während eine Tastatur auf mobilen Geräten sichtbar ist. Das Scrollen sorgt dafür, dass die markierte Eingabe immer sichtbar ist und nicht von der Bildschirmtastatur verdeckt wird.

@dylanvdmerwe Vielen Dank für die schnelle Antwort, das Szenario, das ich präsentiert habe, sieht richtig aus und ich verstehe, dass der Bildschirm scrollt, wenn sich die Tastatur auf dem Bildschirm zeigt. Ich habe jedoch ein anderes seltsames Szenario mit einem ion-input innerhalb eines ion-list mit aktivierter Artikelnachbestellung. Die Eingabe springt außerhalb der Grenzen und der Benutzer kann nicht sehen, was geschrieben wird.

@almr193 Ja, das ist leider immer noch ein ungelöstes Problem.
Siehe Android Punkt 1) und 4) des ersten Beitrags oben.

+1 Noch ungelöst. Alle Methoden von Keyboard in ionic-native scheinen auf Android nicht zu helfen

Ich habe ein Problem mit der Verwendung von Folien + Eingaben. Es zeigt ein sehr seltsames Verhalten, indem es kein Scrollen durchführt.

+1

Cordova CLI: 6.4.0
Ionic Framework-Version: 2.0.0
Ionische CLI-Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionische App-Skripte Version: 1.0.0
ios-deploy-Version: Nicht installiert
iOS-Sim-Version: 5.0.13
Betriebssystem: macOS Sierra
Knotenversion: v6.9.4
Xcode-Version: Xcode 8.2.1 Build-Version 8C1002

+1

Dies ist immer noch ein Problem mit den neuesten und besten Cordovas und Ionics.

Gibt es eine Lösung oder Abhilfe?

-- Aktualisiert --

Wenn Sie mit der Eingabe beginnen, wird die Eingabe in die Ansicht gescrollt, aber wenn die Tastatur anfänglich angezeigt wird, wird die Eingabe von der Tastatur verdeckt.

--

Your system information:

Cordova CLI: 6.5.0 
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: OS X El Capitan
Node Version: v6.1.0
Xcode version: Xcode 8.2.1 Build version 8C1002

Einstiegsbild

Bildschirm nach Auswahl des Domäneneingabeelements

Liebes ionisches Team ( @manucorporat , @brandyscarney , @adamdbradley )
Ich weiß, dass Sie hart an der nächsten Version arbeiten, aber diese Tastaturprobleme sind für die App-Erfahrung von großer Bedeutung. Bitte erwägen Sie, ihnen eine hohe Priorität zu geben, zusammen mit anderen seit langem bestehenden Problemen wie dem virtuellen Scrollen.
Riesige App-Größe und langsamer Start sind scheiße, okay, aber wenn die App installiert ist und ausgeführt wird, sollte sie eine angemessene Erfahrung mit den grundlegenden Dingen wie der Tastaturbedienung bieten.

Muss mich hier @mpaland hat Recht. Es gibt so viele ausstehende Fehler (einige von meinen sind 4 Monate alt und immer noch ohne Antwort offen!), die mit der grundlegenden Funktionalität einer App zu tun haben. Siehe hier zum Beispiel:

• #9633
• #9518
• #9514
• #8607

Diese wurden scheinbar einfach dem Verrotten überlassen, während das Team zugegebenermaßen nette Funktionen hinzufügt, wie kürzlich das geteilte Fenster.

Das Problem ist, dass es wirklich keinen Sinn macht, neue Funktionen hinzuzufügen, wenn die Kernfunktionen noch auf offensichtliche Weise kaputt sind. Es ist wohl wichtiger, die grundlegenden Dinge richtig zu machen, bevor Sie das Framework hinzufügen.

Ich liebe all die harte Arbeit, aber die Prioritäten scheinen hier falsch zu sein.

Leute, der beste Weg, um Dinge zu priorisieren und zu beheben, besteht darin, _reproduzierbaren Code_ bereitzustellen, den das Ionic-Team testen und die Probleme finden kann. Screenshots und Gifs sind episch, aber Code, mit dem sie Ihre Probleme erkennen können, ist am besten. #2 Cent

Beachten Sie, dass Sie bei Formularen und Eingaben nicht display: absolute um Dinge zu positionieren.

Ich habe auch diese Probleme. Dies ist kein triviales Problem. Wie ist dieses Problem seit einem Jahr ohne scheinbare Lösung?

Ich habe ein Problem, wenn ein Eingabefeld fokussiert ist, der Bildschirm geht jedes Mal auf und ab, wenn ich auf das Feld klicke. Kann mir bitte jemand helfen?

Ionen-Framework-Version: 2.3.0
Ionische CLI-Version: 2.2.2
Ionic App Lib-Version: 2.2.1
Ionische App-Skripte Version: 1.1.4
iOS-Bereitstellungsversion: 1.9.1
iOS-Sim-Version: 5.0.4
Betriebssystem: macOS Sierra
Knotenversion: v7.2.0
Xcode-Version: Xcode 8.2.1 Build-Version 8C1002

@pedrodurek es wäre großartig, wenn Sie einen Plunker zur Verfügung stellen, damit sich die Jungs von ionic reproduzieren können.

Ich habe eine vorübergehende Problemumgehung für das Problem des Herumspringens von Text gefunden. Dies ist KEIN Fix, sondern im Wesentlichen ein Hack, bis ein besserer Fix implementiert ist.

Stellen Sie zunächst sicher, dass Sie diese eingestellt haben:

this.keyboard.disableScroll(false);
this.keyboard.hideKeyboardAccessoryBar(true);

Als nächstes finden Sie in Ihrer app.module.ts Folgendes:

IonicModule.forRoot(YourApp)

und mach es so:

IonicModule.forRoot(YourApp, {
      scrollAssist: false,
      autoFocusAssist: false
    }),

Dies behebt alle Sprungprobleme, die ich habe, hat aber leider den Effekt, dass die Navigationsleiste vom Bildschirm weggedrückt wird, wenn ein Benutzer tippt. Dies scheint jedoch die einzige schlimme Nebenwirkung zu sein, die mir aufgefallen ist.

@ Tyler-Darby Vielen Dank, dass Sie Ihre Lösung geteilt haben. Es ist nicht die beste Lösung, aber eine vernünftige, und sie hat für mich funktioniert.

Ich hatte dieses Problem und es machte mich wahnsinnig, aber ich fand schließlich heraus, dass es dadurch verursacht wurde, dass ein transform: translate3d(0,0,0) auf Elemente angewendet wurde, um die Hardwarebeschleunigung zu erzwingen. Es stellte sich heraus, dass der Eingabefokus beim Hochfahren der Tastatur unterbrochen wird.

Ich bin sicher, das ist nicht die Ursache für jedermanns Problem, aber hoffentlich kann es jemandem helfen.

Ich habe mehrere Plattformen und habe es repariert, indem ich ..

Ich habe app.component.ts eingefügt:

constructor(
                ...
                public config: Config,
        ) {
                // all platforms
        this.config.set( 'scrollPadding', false )
        this.config.set( 'scrollAssist', false )
        this.config.set( 'autoFocusAssist', false )
        // android
        this.config.set( 'android', 'scrollAssist', true )
        this.config.set( 'android', 'autoFocusAssist', 'delay' )
               ...

Vielleicht ist es für jemanden hilfreich.
Danke Jungs für Hinweise ;)

Überprüfen Sie das Video:
https://www.dropbox.com/s/6p49z0chle9g1b9/git-ios-input.mov?dl=0

Umweltinfos:
globale Pakete:

@ionic/cli-utils : 1.3.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.3.0

lokale Pakete:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.3.0
@ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms               : ios 4.4.0
Ionic Framework                 : ionic-angular 3.3.0

System:

Node       : v7.10.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.2 Build version 8E2002 
ios-deploy : 1.9.0 
ios-sim    : 5.0.8

Ich habe <input/> als <ion-input></ion-input>
Versuchen Sie es damit.

Hallo @maulikakapure ,

Ich starte meine erste ionische Anwendung für mein Unternehmen und habe auch das Scroll- / Fokusproblem mit der Tastatur. Offensichtlich haben Sie eine Lösung gefunden, die Sie in Ihrem Video gezeigt haben. Könnten Sie den Quellcode bereitstellen? Ich habe noch nicht die richtige Kombination aus Workarounds, Konfigurationsparametern und HTML-Tags gefunden.

Vielen Dank

@ Tyler-Darby Hey Tyler, wo füge ich den folgenden Code ein?

this.keyboard.disableScroll(false);
this.keyboard.hideKeyboardAccessoryBar(true);

Hallo @cwiejack

Bitte überprüfen Sie hier eine einfache Demo: https://www.dropbox.com/s/1o9hrnjgt7u3bpy/BasicDemo.zip?dl=0

Vielen Dank.

Um die Standard-Keyword-Probleme mit Ionic zu beheben, fügen Sie einfach Folgendes in die Importe Ihrer app.module.ts ein:

    IonicModule.forRoot(MyApp, {
      scrollAssist: false,
      autoFocusAssist: false
    })

Das behebt die Tastaturprobleme sofort.

@aplimovil Dies hat das Problem in meiner Android-App gelöst! Viele Grüße an dich guter Mann!

Was bringt es, scrollAssist & autoFocusAssist wenn sie auf true macht Apps unbrauchbar?

Gibt es Fälle, in denen deren Aktivierung Vorteile bringen würde?

aplimovils Fix scheint alle Probleme behoben zu haben, die ich hatte!

Also ja, mich würde interessieren, warum Sie jemals eines davon auf "wahr" gesetzt haben.

@JefferE Das liegt daran, dass die scrollAssist- und autoFocusAssist-Funktionen von Ionic in iOS defekt sind (in Android funktionieren sie fast einwandfrei, obwohl die Verbesserungen zumindest für mich praktisch unbemerkt bleiben) und scheinen nicht alle Problemberichte hier genug notiert zu haben, damit sie es beheben in einer kommenden Veröffentlichung. Hoffentlich werden sie eines Tages diesen Thread bemerken und diese Funktionen für iOS endgültig reparieren oder sie selektiv standardmäßig in iOS deaktivieren.

Wenn ion-textarea in grid,keyboard.disablescroll(false) nicht funktioniert? Wie geht das mit dem Problem?

Das hat bei mir funktioniert

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true,
            autoFocusAssist: false

    }),

Ionische Informationen:

CLI Packages:

@ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.1

System:

    Android SDK Tools : 25.2.5
    ios-deploy        : 1.9.1 
    ios-sim           : 5.0.8 
    Node              : v6.11.3
    npm               : 3.10.10 
    OS                : macOS Sierra
    Xcode             : Xcode 8.3.3 Build version 8E3004b 

Ich wollte euch nur wissen lassen, dass ich ein ähnliches Problem auf iOS habe , nämlich dass die Tastatur über die Eingabefelder scrollt und der Inhaltsbildschirm nicht aktualisiert wird, um Platz für die Tastatur zu schaffen.

Das Wichtigste , was ich herausgefunden habe, ist, dass bei der Verwendung von Plugins (wie @ionic-native/keyboard)
und in dem Moment, in dem auf der Tastatur this.keyboard.onKeyboardShow().subscribe(()=>{ this.someFlag=true}) angezeigt wird, Dinge an Ihrer Schnittstelle tun und das Flag in der Schnittstelle verwenden, um etwas zu ändern. es wird sich nicht ändern , Sie müssen die Winkeländerungserkennung selbst auslösen, indem Sie ChangeDetectorRef importieren und die Funktion detectChanges() in subscribe .

Ich habe dieses gitrepo erstellt , um den Fall zu zeigen. Schauen Sie gerne rein. Dies war ein Augenöffner für mich, da ich nicht wusste, dass es Fälle gibt, in denen Sie subscribe(()=>{}) an etwas ändern, Änderungen vornehmen, dies jedoch nicht in der Benutzeroberfläche angezeigt wird.

bin heute etwas klüger geworden :)

Zum Schluss: Allen ein schönes Wochenende!

Es ist für mich verwirrend, dass dieses Problem über 1,5 Jahre alt ist und keine Maßnahmen ergriffen wurden. Das ruiniert den Flow meiner App komplett. Es lässt es fehlerhaft und von schlechter Qualität aussehen und wir müssen zu Hacks führen, um die Dinge annähernd gut aussehen zu lassen. @mhartington ist hier intern etwas los?

Ich habe ein Telefongespräch mit @matthewkremer von Ionic geführt, um die PRO-Version von ionic jetzt zu verwenden, und darauf

Gleiche für mich. Das sieht gar nicht schön aus..

Hallo zusammen , dies wird für uns zu einer Top-Priorität, siehe den Tweet von https://twitter.com/adamdbradley/status/916295747968040960

Erwarte Updates in den kommenden Tagen/Wochen

Klingt gut. Ich hoffe, dass wir bald wieder Leben bekommen, ohne unnötige Hacks anzuwenden.

Für die Leute, die WK bereits verwenden, bereite ich ein neues Tastatur-Plugin vor: cordova-plugin-ionic-wkkeyboard :

1. Deinstallieren Sie zuerst ionic-plugin-keyboard

cordova plugin rm ionic-keyboard-plugin --save

1. Neues Plugin installieren:

cordova plugin add cordova-plugin-ionic-wkkeyboard --save

cc @hitendramalviya @ionut-movila @mmolhoek @Tyler-Darby @yingbaby @maulikakapure @aplimovil

Es gibt ein seltsames Problem mit diesem neuen wkkeyboard und dem Deaktivieren/Aktivieren von ion-textarea mit FormGroups und FormControls. Nach erneutem Aktivieren des vollständigen Formulars bleibt der Ionen-Textbereich deaktiviert. Es passiert nicht, wenn Sie die "alte" Tastatur verwenden.

Ich werde heute Abend ein Problem erstellen :).

// Bearbeiten:
Wahrscheinlich hängt es mit etwas anderem zusammen. Gleiches Verhalten im Browser.
https://github.com/ionic-team/ionic/issues/13170

Worauf sollte ich achten, wenn die Tastatur einfach keine Größenänderung auslöst, geschweige denn ein Scrollen zur Eingabe?

Es scheint, als ob das Scroll-Problem bereits behoben sein sollte, aber ich habe immer noch Probleme unter iOS, bei denen die Eingabe nicht in der Mitte des Bildschirms angezeigt wird, wenn die Tastatur hochgeklappt ist. Dies ist sowohl ein Problem, wenn auf die Eingabe getippt wird oder wenn ich die Navigationstasten der Tastatur verwende. Verpasse ich etwas? Ich habe einige der hier vorgestellten Lösungen ausprobiert, aber sie scheinen nicht zu funktionieren. (für zusätzliche Informationen verwende ich Ionic im Browser nicht als native App)

wow 2018 und nichts.

Sie haben mir diese Lösung gegeben, aber sie ist nicht ganz perfekt

.scroll-Inhalt {
Polsterung-unten: 0! wichtig;
}

Hallo Leute, ich habe zufällig festgestellt, dass der Standardbuild _cordova-plugin-ionic-keyboard_ hat. Und als ich es durch _ionic-plugin-keyboard_ ersetzt habe, sind die Eingabefehler verschwunden.

Also meine Lösung ist:
Cordova Plugin rm Ionen-Tastatur
ionic Cordova Plugin ionic-plugin-tastatur hinzufügen
npm install --save @ionic-native/keyboard

+1

Vendettall, das habe ich versucht, aber es hat nicht funktioniert!

Haben Sie diesen nervigen Fehler mit der Header-Symbolleiste?

Am Do, 29. März 2018 um 23:31 Uhr, Emmanuel Fache [email protected]
schrieb:

Vendettall, das habe ich versucht, aber es hat nicht funktioniert!

—
Sie erhalten dies, weil Sie einen Kommentar abgegeben haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/ionic-team/ionic/issues/6228#issuecomment-377362762 ,
oder den Thread stumm schalten
https://github.com/notifications/unsubscribe-auth/AYPMdggjRqZBZ0wghtxFjVbPLViBkR8hks5tjUSQgaJpZM4IKhUp
.

Wenn dieses Problem weiterhin besteht, versuchen Sie es mit dem neueren ionischen Tastatur-Plugin

ionic cordova plugin rm  ionic-keyboard-plugin
ionic cordova plugin add cordova-plugin-ionic-keyboard

Dann setze

<preference name="KeyboardResizeMode" value="ionic" />

In der config.xml

Hi,
In der App arbeite ich, alles funktioniert gut. Aber aus irgendeinem Grund muss ich die Eingaben in der HTML-Tabelle verwenden. In diesem Fall wird jedes Mal, wenn ich auf die Eingabe klicke, die Tabelle neu gezeichnet und das Scrollen der Tabelle zurückgesetzt.
Kann hier jemand helfen?

Sehen Sie auch, dass das Transformationsproblem auftritt. Es ist ziemlich nervig.

Zum Scrollen von pb habe ich hier einen Hack geschrieben: https://github.com/ionic-team/ionic/issues/10629#issuecomment -395084125

Dieser Kommentar oben, den AbrahamLopez10 am 1. August 2017 kommentiert hat, hat für mich perfekt funktioniert, Eingabefelder werden angezeigt, wenn die Android-Tastatur angezeigt wird.

@dylanvdmerwe , @jgw96 @mhartington @Tyler-Darby @manucorporat @adamdbradley

Hallo Leute, ich habe gerade eine benutzerdefinierte Anweisung erstellt, um dieses Problem auf iOS- und Android-Plattformen für Ionic 2 & 3 Anwendungen zu behandeln. Könnten Sie bitte überprüfen, ob dies alle Probleme im Zusammenhang mit diesem Scroll-Problem löst.

Ich habe " Scroll-in- to erstellen

Installieren Sie die Direktive ion-input-scroll-into-view mit dem Befehl npm install ion-input-scroll-into-view

Schritt 1
Hängen Sie die ion-input-scroll-in-to-view-Anweisung wie folgt an den Bereich ion-input oder ion-text an.

<ion-input ion-input-scroll-into-view></ion-input>

<ion-textarea ion-input-scroll-into-view></ion-textarea>

Schritt 2

Sie müssen das IonInputScrollIntoViewModule wie folgt in die module.ts Ihrer Elternkomponente importieren

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ParentPage } from './parent';
import { IonInputScrollIntoViewModule } from 'ion-input-scroll-into-view';

@NgModule({
  declarations: [
    ParentPage
  ],
  imports: [
    IonicPageModule.forChild(ParentPage),
    IonInputScrollIntoViewModule
  ],
})
export class ParentPageModule {}

npm-Link: https://www.npmjs.com/package/ion-input-scroll-into-view
Github-Link: https://github.com/melwinVincent/ion-input-scroll-into-view

Danke für das Problem! Wir haben den Quellcode und die Probleme für Ionic 3 in ein separates Repository verschoben. Ich verschiebe dieses Problem in das Repository für Ionic 3. Bitte verfolgen Sie dieses Problem dort.

Vielen Dank, dass Sie Ionic verwenden!

Problem verschoben nach: https://github.com/ionic-team/ionic-v3/issues/47