Ionic-framework: issue(forms): Saisie, défilement, problèmes de clavier pour les formulaires

@dylanvdmerwe C'est super, merci d'avoir

Va également pour la complétion automatique et la correction automatique, par défaut, ils sont désactivés à moins qu'ils ne soient spécifiquement ajoutés à l'élément : https://github.com/driftyco/ionic/blob/2.0/ionic/components/input/input-base.ts #L217

Pensez-vous que la capitalisation automatique devrait également être désactivée par défaut ?

@adamdbradley

• Je n'arrive pas à faire basculer les boutons du clavier sur iOS entre les différentes entrées. Ils deviennent « confus » et le clavier finit par se fermer. Encore faut-il tester sur Android lorsque je teste avec d'autres claviers qui ont ces boutons.
• Je ne sais pas ce qui convient le mieux aux valeurs par défaut pour la saisie semi-automatique et la correction automatique. Dans iOS pour certains types de clavier, ils sont activés par défaut - mais je pense qu'il est préférable de suivre les règles standard <input> ?
• Je testerai quelques permutations pour la saisie semi-automatique et la capitalisation automatique un peu plus tard. Remarque J'ai enregistré cela séparément ici lorsque le plugin de clavier a changé.

Veuillez noter que je les teste sur des appareils réels.

@adamdbradley J'ai mis à jour les éléments ci-dessus. Les choses en suspens sont des problèmes reproductibles définis.

Où en sommes-nous sur le numéro 1 d'Android ? Cela gâche totalement mon application sans cela.

+1 sur le numéro 1 d'Android :)

Des mouvements sur les éléments listés dans ce numéro ?

@dylanvdmerwe une fois la prochaine version bêta publiée (bêta8), nous nous concentrerons sur la résolution de problèmes comme celui-ci. Excusez les inconvénients

+1 sur le numéro 1 d'Android :)

+1 sur le problème Android :

. Lors de la sélection d'une entrée, tout le contenu du formulaire doit défiler afin que l'élément sélectionné soit visible après l'affichage du clavier.

Cela m'empêche de porter complètement de ionic1 à ionic 2 .
Tous mes vœux!

Cela m'empêche de porter complètement de ionic1 à ionic 2 .

Pareil ici.

+1 sur le numéro 1 d'Android
Veuillez corriger cela au plus tôt ! Nous avons lancé une nouvelle application à ce sujet, mais nous ne voulons pas que ce bogue soit un facteur décisif et nous fasse revenir à ionic 1 !

@adamdbradley , @jgw96 Existe-t-il une solution de contournement pour le moment ?

Pouvez-vous s'il vous plaît donner une mise à jour? Difficile à faire une démonstration avec cette fonctionnalité principale qui ne fonctionne pas...
Merci!

J'apprécierais également une mise à jour à ce sujet. Nos éléments ion-input ne défilent pas lorsque vous les focalisez. Nous avons essayé de passer aux éléments input normaux, mais cela cause toutes sortes d'autres problèmes. Merci!

Bonjour à tous! Je peux vous assurer que nous travaillons dur sur des questions comme celle-ci. Voyez-vous tous ce problème principalement sur iOS ou Android ? Ou ça arrive sur les deux ?

Cela arrive sur Android, je ne suis pas sûr d'iOS. À l'heure actuelle, une seule fois que je commence à taper, l'interface utilisateur défile pour afficher l'entrée. Idéalement, cela devrait se produire dès que la mise au point et le clavier apparaissent.

Salut,

Je vois plusieurs autres problèmes sur iOS sur l'appareil (je n'ai pas vérifié sur Android) :

• Avec les étiquettes flottantes, lorsque vous cliquez sur une entrée, elle affiche souvent temporairement une ligne vide avant la valeur, provoquant le saut de la valeur et l'expansion verticale de l'entrée. Avec des étiquettes normales, la valeur est parfois temporairement déplacée horizontalement.
• Avec les étiquettes flottantes, le caret saute en dehors de l'entrée lors du défilement.
• Lorsque vous utilisez le plug-in de clavier cordova et que vous utilisez la barre d'accessoires pour naviguer entre les champs, la vue entière saute parfois. Après avoir défini disableScroll(true), le bouton suivant fonctionne correctement, mais le bouton de retour fait toujours sauter l'écran. Vous ne savez pas si cela doit être signalé à la place ?

Merci pour le bon travail sur Ionic, j'ai hâte d'avoir réglé les problèmes !

Même problème avec le clavier et l'entrée ionique dans Android. Problème très important sur toutes les applications avec des formulaires !

Aucune mise à jour sur ce problème critique?

une mise à jour sur ce problème?

J'adorerais que cela soit examiné dans un prochain RC.

Mise à jour à ce sujet. #5 pour iOS, je ne peux pas reproduire. Cela fonctionne bien pour moi en master, quelqu'un peut-il confirmer?

En regardant #1 maintenant.

Je suis confronté au même problème. Y a-t-il des mises à jour sur le même? .

Sur iOS #1 ne fonctionne pas très bien sur les grands écrans (iPad). L'entrée défile tout en haut, alors qu'il serait bien de la rapprocher du clavier.

Salut,

Il a fallu un certain temps pour enquêter sur le problème, car il s'est produit sur plusieurs appareils de notre côté.

Android:

• Semble bien lors de l'activation de scrollAssist
• Encore un bug lors du passage d'une entrée ion à une autre alors que le clavier est déjà ouvert (défilement de page trop important).

iOS :

• Première fois, la page ne défile pas
• Deuxième fois, sur n'importe quelle entrée de la page, la page défile avec précision
• Comme pour Android, lors du passage d'un champ à l'autre, la page défile trop.

Après quelques recherches, nous avons découvert que scroolView.scrollTo utilise la propriété HTML scrollTop.
Cette propriété est limitée par la valeur théorique : scrollHeight - clientHeight.

Nous venons d'ajouter les lignes suivantes dans scroll-view.js (node_modules/ionic-angular/util/) :
console.log(fromY + ' =>' + y);
console.log('valeur théorique max : ' + (this._el.scrollHeight - this._el.clientHeight));
Et le problème semble évident.

Pour certaines raisons, lorsque vous focalisez le champ sur Android, le clavier est généré avant le défilement vers le haut, donc la valeur théorique maximale est supérieure à la valeur que nous voulons faire défiler vers le haut. Sur iOS, la première fois, ce n'est pas le cas. La valeur maximale de défilement vers le haut est donc de un.

À ton tour ;)

@EDumdum Comment reproduire ce problème ? Lorsque j'ai le focus sur une entrée et que le clavier est déjà levé, et que je passe à l'entrée suivante, l'entrée suivante défile sous l'en-tête. Cela ne le fait-il pas pour vous ?

Encore un bug lors du passage d'une entrée ion à une autre alors que le clavier est déjà ouvert (défilement de page trop important).

Salut @adamdbradley

Étape pour créer l'exemple ci-dessous. Les captures d'écran proviennent de l'émulateur, mais nous reproduisons le même comportement sur les appareils. Le formulaire est là pour ajouter de la couleur (bleu = champ ciblé, rouge = autre champ).

Étape à reproduire

• Champ de mise au point 2
  https://drive.google.com/open?id=0B6y5VVmSy-NVZ2xZdjFORzctZFE
  Tout va bien :)
• Champ de mise au point 1
  https://drive.google.com/open?id=0B6y5VVmSy-NVT0ZpUmd6RllPeHM
  Devrait faire défiler vers le bas au lieu de faire défiler plus vers le haut :(
• Champ de mise au point 2
  https://drive.google.com/open?id=0B6y5VVmSy-NVcExibnA5bUJTWUk
  Mince...

Étape pour créer un exemple

• Création d'un nouveau projet (ionic start -v2 myApp) => RC2
• Ajout de scrollAssist dans mon constructeur d'application
  constructor(config: Config, platform: Platform) { config.set('scrollAssist', true); ... }
• J'ai modifié mon home.html et home.ts et un petit ajout à .scss

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

Les mouvements de construction nocturnes, ils saisissent correctement les champs, mais à certains endroits, lorsque vous appuyez sur le bouton de retour et que le clavier glisse vers le bas, les entrées restent là où elles sont (glisser vers le haut), elles auraient dû arriver à l'endroit d'origine.
Deuxièmement, je ne peux pas taper sur l'émulateur, car cela m'oblige à taper sur le clavier à l'écran et emu ne l'affiche pas.

@kodeine

Super merci pour le retour ! J'utiliserai toutes ces notes pour divers scénarios de test. J'essaierai de sortir bientôt pour que tout le monde puisse le tester, merci !

@adamdbradley
un autre scénario, j'étais sur une page où j'avais saisi et le clavier était ouvert, j'ai cliqué sur le bouton de retour et j'ai remarqué que les onglets étaient également au-dessus du clavier. alors peut-être que nous devons garder les onglets derrière le clavier.

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

Cela fonctionne mieux la nuit !

J'ai cependant trouvé un bug introduit par les changements récents. Si l'entrée A a le focus et que vous appuyez sur l'entrée B, le clavier se masque et aucune des entrées n'aura le focus.

De plus, lors de la focalisation d'une entrée, elle "saute" en position, au lieu d'une animation de défilement fluide comme lorsque vous focalisez une entrée dans Safari par exemple, est-ce voulu ?

EDIT: Ceci utilise WKWebView. Je n'ai pas testé UIWebView.

Je suis vraiment intéressé de savoir s'il y aura un support pour le bouton "suivant" pour les entrées.
Il est assez difficile pour l'utilisateur (android, pas sûr pour ios) de ne pas appuyer sur le bouton soumettre/ok en pensant qu'il passerait à la prochaine entrée plutôt que de terminer l'action du formulaire.

@biesbjerg Pouvez-vous décrire davantage comment recréer ces problèmes ? Lorsque vous dites qu'il saute en position, l'en-tête est-il supprimé ? Quel type d'entrée ? L'entrée est-elle en haut de l'application ou près du bas ? Pouvez-vous fournir une vidéo du problème? Merci

@adamdbradley cette vidéo montre le "saut en position au lieu d'un défilement fluide" et montre également un bogue que j'ai remarqué, que si vous vous concentrez sur une entrée et appuyez sur le bouton matériel de retour, le contenu ne revient pas en arrière.
edit: taille du gif modifiée.

@adamdbradley C'est le problème de mise au point d'entrée, où le clavier disparaît plutôt que de concentrer l'entrée tapée.

Et c'est sur Android, où au focus, mon formulaire fait un saut soudain, et la première entrée focalisée n'est pas visible à l'écran :

Bonjour @biesbjerg ! Nous avons publié très récemment un autre nightly qui incluait quelques correctifs supplémentaires pour le défilement des entrées, cela vous dérangerait-il d'essayer ? Merci!

@jgw96 Salut ! J'ai testé 2.0.0-rc.3-201611302233 et rien n'a changé, donc les enregistrements gif sont toujours des problèmes valides.

Merci d'avoir testé @biesbjerg ! Pourriez-vous publier un dépôt ou créer un plunkr que je peux utiliser pour reproduire ce problème ?

@jgw96 Et voilà ! https://github.com/biesbjerg/6228-ionic-keyboard-issues

Pas:

1. git clone https://github.com/biesbjerg/6228-ionic-keyboard-issues.git
2. cd 6228-ionic-keyboard-issues
3. npm install
4. mkdir www (nécessaire à cause d'un bug cordova/ionic où www doit exister ou l'installation du plugin échouera)
5. ionic state reset
6. Exécuter sur des appareils

Le problème indiqué sur la vidéo iOS est un problème avec UIWebView ainsi que WKWebView.

Le problème Android a quelque chose à voir avec le fait que mon contenu est centré verticalement à l'aide de flexbox, mais il devrait néanmoins

Bonjour @biesbjerg ! Merci pour le repo. Il y a quelques autres changements qui se produisent avec le défilement aujourd'hui qui peuvent résoudre ce problème, je mettrai à jour ce message avec mes conclusions après les tests.

Salut @jgw96 ! Frais! :-)

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

Je vois que cette partie (enfin, et d'autres parties) a une coche à côté d'elle ; cela signifie-t-il que ce sera dans la prochaine version ? Ce serait génial pour les applications de chat qui ont un bouton Envoyer dans un <ion-footer> au-dessus du clavier ! Ensuite, le clavier ne se fermait pas toujours après avoir cliqué sur le bouton Envoyer

Salut à tous. J'ai aussi le même problème. Et j'observe quelque chose.
Lorsque les entrées ne sont pas sélectionnées, nous avons ce cas.

Mais quand nous le sélectionnons, nous avons celui-ci

En conséquence, j'ai fait ce mauvais pas avec !important

Et cela fonctionne pour moi comme solution temporaire.

Donc... les choses deviennent vraiment compliquées quand vous avez quelque chose qui utilise position:relative.

Dans cet exemple, le logo est l'élément avec une position relative, et si vous appuyez sur la première entrée, cela donne ceci :

Mais un appui sur la deuxième entrée pousse aussi le logo :

@jgw96 des nouvelles de ce problème et de la RC.4 ?

Moi aussi j'espère vraiment avoir des nouvelles à ce sujet, mon client met beaucoup de pression 🙉

La bonne nouvelle est que les entrées se comportent tellement mieux dans les derniers nightlies. Je pense que beaucoup de gens, y compris moi-même en tant que consignateur d'origine de ce problème, seront satisfaits des correctifs.

@yannbf , pour être honnête, Ionic 2 est toujours un logiciel de pré-version.

Je comprends cela et je trouve cela vraiment raisonnable. J'espérais juste avoir une mise à jour pour la transmettre. Je suis très reconnaissant pour ce que l'équipe ionic a fait.

Quoi qu'il en soit, comment tester mon application actuelle avec cette nuit ?

@yannbf npm install ionic-angular<strong i="6">@nightly</strong> --save
et n'oubliez pas de mettre à jour votre package.json vers angulaire 2.2.1

Fonctionne beaucoup mieux avec la nuit ! Merci les gars

Bonjour à tous! Merci d'avoir utilisé Ionic ! @biesbjerg et @yannbf , voudriez-vous mettre à jour vers rc4 et tester s'il vous plaît ? Cette version contient une tonne de correctifs de défilement d'entrée qui devraient, espérons-le, résoudre les problèmes de votre gars. Merci!

@ jgw96 Oui, je l'ai déjà fait. C'est bien mieux ! Hâte de la sortie finale 😄

@jgw96 Après la mise à jour, les choses se sont bien améliorées, mais les éléments avec position:absolute ou position:fixed sont toujours affectés. J'ai pu me déplacer à partir de cette page avec le logo. J'ai déjà envoyé une impression (avec une autre approche, en supprimant la position absolue), mais comme dans la page suivante, je dois avoir des "conditions d'accord" en bas de page, je suis toujours confronté au problème :

Voici le code :

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

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

Dans mon cas, après la mise à jour vers RC5, le problème d'entrée de saut sur Android persiste. Je viens de démarrer un nouveau projet avec le modèle vierge et j'ai copié le composant d'entrée d'ions de la documentation dans le contenu d'ions, le comportement ci-dessous.

Comme vous pouvez le voir, chaque composant saute sauf le premier.
Pour mémoire, il s'agit de la sortie de la commande ionic info .

Cordoue CLI : 6.4.0
Version du cadre ionique : 2.0.0-rc.5
Version Ionique CLI : 2.2.1
Version de l'application Ionic Lib : 2.2.0
Version des scripts d'applications ioniques : 1.0.0
version ios-deploy : non installée
Version ios-sim : Non installé
Système d'exploitation : Windows 10
Version du nœud : v6.9.2
Version Xcode : Non installé

@ almr193 ce comportement semble correct. L'écran défile comme un clavier sera visible sur les appareils mobiles. Le défilement garantit que l'entrée en surbrillance est toujours visible et non couverte par le clavier à l'écran.

@dylanvdmerwe Merci pour la réponse rapide, le scénario que j'ai présenté semble correct et je comprends que l'écran défile alors que le clavier s'affiche à l'écran. Cependant, j'ai un autre scénario étrange avec un ion-input dans un ion-list avec la réorganisation des articles activée. L'entrée dépasse les limites et l'utilisateur ne peut pas voir ce qu'il est en train d'écrire.

@ almr193 oui, c'est toujours un problème non résolu, malheureusement.
Voir les éléments Android 1) et 4) du message initial ci-dessus.

+1 Toujours non résolu. Toutes les méthodes de Keyboard dans ionic-native ne semblent pas aider sur Android

J'ai un problème avec l'utilisation des diapositives + entrées. Il montre un comportement très étrange en n'effectuant aucun défilement.

+1

Cordoue CLI : 6.4.0
Version du cadre ionique : 2.0.0
Version Ionic CLI : 2.1.18
Version de l'application Ionic Lib : 2.1.9
Version des scripts d'applications ioniques : 1.0.0
version ios-deploy : non installée
version ios-sim : 5.0.13
Système d'exploitation : macOS Sierra
Version du nœud : v6.9.4
Version Xcode : Xcode 8.2.1 Version de construction 8C1002

+1

C'est toujours un problème avec le dernier et le plus grand cordova et ionique.

Existe-t-il une solution ou un contournement ?

-- Mis à jour --

Lorsque vous commencez à taper, l'entrée défile dans la vue, mais lorsque le clavier est initialement affiché, l'entrée est masquée par le clavier.

--

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

Écran initial

Écran après avoir sélectionné l'élément d'entrée de domaine

Chère équipe ionique ( @manucorporat , @brandyscarney , @adamdbradley )
Je sais que vous travaillez dur sur la prochaine version, mais ces problèmes de clavier sont très importants pour l'expérience de l'application. Veuillez envisager de leur donner une priorité élevée, ainsi que d'autres problèmes de longue date comme le défilement virtuel.
La taille énorme de l'application et le démarrage lent sont nuls, d'accord, mais lorsque l'application est installée et en cours d'exécution, elle devrait offrir une expérience appropriée sur les éléments de base tels que la gestion du clavier.

Je dois intervenir ici, @mpaland a raison. Il y a tellement de bogues en suspens (certains des miens datent de 4 mois et sont toujours ouverts sans réponse !) qui concernent les fonctionnalités de base d'une application. Voir ici par exemple :

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

Ceux-ci ont apparemment été laissés à pourrir, tandis que l'équipe a ajouté des fonctionnalités certes intéressantes, telles que le volet divisé récemment.

Le problème, c'est qu'il ne sert à rien d'ajouter de nouvelles fonctionnalités si les principales sont toujours en panne d'une manière évidente. Il est sans doute plus important de bien comprendre les éléments fondamentaux avant d'ajouter au cadre.

Aimer tout le travail acharné, mais les priorités semblent être fausses ici.

Les gars, la meilleure façon de prioriser et de corriger les choses est de fournir un _code reproductible_ que l'équipe Ionic peut tester et trouver les problèmes. Les captures d'écran et les gifs sont épiques, mais le code qu'ils peuvent utiliser pour voir vos problèmes est le meilleur. #2cents

Notez qu'avec les formulaires et les entrées, n'utilisez pas display: absolute pour positionner les choses.

J'ai aussi ces problèmes. Ce n'est pas un problème trivial. Comment cela a-t-il été un problème depuis un an maintenant sans apparemment aucune solution ?

J'ai un problème lorsqu'un champ de saisie est focalisé, l'écran monte et descend à chaque fois que je clique sur le champ. Quelqu'un peut-il m'aider, s'il vous plaît?

Version du cadre ionique : 2.3.0
Version ionique de la CLI : 2.2.2
Version de l'application Ionic Lib : 2.2.1
Version des scripts d'applications ioniques : 1.1.4
version de déploiement d'ios : 1.9.1
version ios-sim : 5.0.4
Système d'exploitation : macOS Sierra
Version du nœud : v7.2.0
Version Xcode : Xcode 8.2.1 Version de construction 8C1002

@pedrodurek, ce serait formidable si vous fournissiez un plunker pour que les gars d'ionic puissent se reproduire.

J'ai trouvé une solution de contournement temporaire pour le problème du texte qui saute. Ce n'est PAS un correctif mais essentiellement un hack jusqu'à ce qu'un meilleur correctif soit mis en œuvre.

Tout d'abord, assurez-vous d'avoir ces ensembles :

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

Ensuite, dans votre app.module.ts, recherchez les éléments suivants :

IonicModule.forRoot(YourApp)

et fais comme ça :

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

Cela résout tous les problèmes de saut que j'ai, mais a malheureusement pour effet de pousser la barre de navigation hors de l'écran lorsqu'un utilisateur tape. Cela semble être le seul effet secondaire que j'ai remarqué, cependant.

@Tyler-Darby Merci d'avoir partagé votre solution, ce n'est pas la meilleure solution mais c'est une solution raisonnable, et cela a fonctionné pour moi.

J'avais ce problème et cela me rendait fou, mais j'ai finalement compris qu'il était causé par l'application d'un transform: translate3d(0,0,0) aux éléments pour forcer l'accélération matérielle. Il s'avère que cela interrompt le focus d'entrée lorsque le clavier apparaît.

Je suis sûr que ce n'est pas la cause du problème de tout le monde, mais j'espère que cela pourra aider quelqu'un.

J'ai plusieurs plates-formes et je le réparais en ..

J'ai mis dans app.component.ts :

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' )
               ...

Peut-être que cela sera utile pour quelqu'un.
Merci les gars pour les conseils ;)

Regardez la vidéo :
https://www.dropbox.com/s/6p49z0chle9g1b9/git-ios-input.mov?dl=0

Infos environnement :
forfaits mondiaux :

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

forfaits locaux :

@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

Système:

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

J'ai utilisé <input/> comme <ion-input></ion-input>
Essayez avec.

Salut @maulikakapure ,

Je démarre ma première application ionique pour mon entreprise et j'ai aussi le problème de défilement/mise au point avec le clavier. De toute évidence, vous avez trouvé une solution que vous avez montrée dans votre vidéo. Pourriez-vous fournir le code source ? Je n'ai pas encore trouvé la bonne combinaison de solutions de contournement, de paramètres de configuration et de balises html à utiliser.

Merci

@Tyler-Darby Hé Tyler, où dois-je mettre le code suivant ?

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

Salut @cwiejack

Veuillez vérifier une simple démo ici : https://www.dropbox.com/s/1o9hrnjgt7u3bpy/BasicDemo.zip?dl=0

Merci.

Pour résoudre les problèmes de mots-clés par défaut avec Ionic, mettez simplement ce qui suit dans les importations de votre app.module.ts :

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

Cela résoudra immédiatement les problèmes de clavier.

@aplimovil cela a résolu le problème sur mon application Android ! beaucoup de courage à toi bonhomme!

À quoi bon avoir scrollAssist & autoFocusAssist si les définir sur true rend les applications inutilisables ?

Existe-t-il des cas où leur activation présenterait des avantages ?

Le correctif d'aplimovil semble avoir résolu tous les problèmes que j'avais !

Alors oui, je serais intéressé de savoir pourquoi vous avez défini l'un ou l'autre de ceux-ci sur vrai.

@JefferE C'est parce que les fonctionnalités scrollAssist et autoFocusAssist d'Ionic sont cassées dans iOS (dans Android, elles fonctionnent presque bien, bien que les améliorations passent pratiquement inaperçues du moins pour moi) et ne semblent pas avoir assez noté tous les rapports de problème ici pour qu'ils le résolvent dans une prochaine version. Espérons qu'ils remarqueront un jour ce fil et corrigeront ces fonctionnalités pour de bon sur iOS ou les désactiveront sélectivement par défaut pour le moment dans iOS.

lorsque ion-textarea dans la grille,keyboard.disablescroll (false) ne fonctionne pas ? comment résoudre le problème

Cela a fonctionné pour moi

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

    }),

Informations ioniques :

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 

Je voulais juste vous faire savoir que j'ai un problème similaire sur iOS, à savoir que le clavier défile sur les champs de saisie et que l'écran de contenu n'est pas mis à jour pour faire de la place pour le clavier.

le point important que j'ai découvert est que lors de l'utilisation de plugins (comme @ionic-native/keyboard)
et faire des choses à votre interface au moment où le clavier s'affiche avec this.keyboard.onKeyboardShow().subscribe(()=>{ this.someFlag=true}) et en utilisant le drapeau dans l'interface pour changer quelque chose. il ne changera pas , vous devrez déclencher vous-même la détection de changement angulaire en important ChangeDetectorRef et en utilisant sa fonction detectChanges() dans le subscribe .

J'ai créé ce gitrepo pour montrer le cas. N'hésitez pas à jeter un œil. Cela m'a ouvert les yeux car je ne savais pas qu'il y avait des cas où vous subscribe(()=>{}) à quelque chose, apportez des modifications, mais cela ne s'affichera pas dans l'interface.

est devenu un peu plus sage aujourd'hui :)

dernière chose : bon week-end à tous !

Je trouve déconcertant que ce problème remonte à plus d'un an et demi et qu'aucune mesure n'ait été prise. Cela ruine complètement le flux de mon application. Cela donne un aspect bogué et de mauvaise qualité et nous devons faire des hacks pour que les choses soient presque belles. @mhartington y a-t-il quelque chose en interne ici ?

J'ai eu une conversation téléphonique avec @matthewkremer d'Ionic à la suite de l'utilisation de la version PRO d'ionic maintenant, et j'ai insisté sur le fait qu'il s'agissait d'un problème majeur. Il a dit qu'il comprenait et qu'il essaierait de faire passer cela à une priorité plus élevée.

Pareil pour moi. ça n'a pas l'air sympa du tout..

Salut à tous, cela devient une priorité absolue pour nous, voir le tweet de @adamdbradley ce matin : https://twitter.com/adamdbradley/status/916295747968040960

Attendez-vous à des mises à jour dans les jours/semaines à venir

Ça sonne bien, j'espère que nous retrouverons bientôt la vie sans appliquer de hacks inutiles.

Pour les personnes utilisant déjà WK, je prépare un nouveau plugin clavier : cordova-plugin-ionic-wkkeyboard :

1. Désinstaller d'abord ionic-plugin-keyboard

cordova plugin rm ionic-keyboard-plugin --save

1. Installer le nouveau plugin :

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

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

Il y a un problème étrange avec ce nouveau wkkeyboard et la désactivation/activation de ion-textarea avec FormGroups et FormControls. Après avoir réactivé le formulaire complet, la zone de texte ionique reste désactivée. Cela ne se produit pas lors de l'utilisation de l'"ancien" clavier.

Je vais créer un problème ce soir :).

// Éditer:
C'est probablement un problème lié à autre chose. Même comportement dans le navigateur.
https://github.com/ionic-team/ionic/issues/13170

Que dois-je rechercher si le clavier ne déclenche tout simplement pas un redimensionnement et encore moins un défilement à saisir ?

Il semble que le problème de défilement devrait déjà être résolu, mais je rencontre toujours des problèmes sur ios où lorsque l'entrée est au milieu de l'écran, l'entrée ne défile pas lorsque le clavier est levé. C'est un problème à la fois lorsque l'entrée est tapée ou lorsque j'utilise les touches de navigation du clavier. Est-ce que j'ai raté quelque chose ? J'ai essayé un tas de solutions présentées ici, mais elles ne semblent pas fonctionner. (pour plus d'informations, j'utilise Ionic dans le navigateur et non comme une application native)

wow 2018 et rien.

ils m'ont donné cette solution mais ce n'est pas tout à fait parfait

.scroll-content {
padding-bottom : 0 ! important ;
}

Salut les gars, j'ai accidentellement trouvé que la version par défaut a _cordova-plugin-ionic-keyboard_. Et quand je l'ai remplacé par _ionic-plugin-keyboard_, les bogues d'entrée ont disparu.

Donc ma solution est :
Cordova plugin rm ionic-keyboard
ionic cordova plugin ajouter ionic-plugin-keyboard
npm install --save @ionic-native/keyboard

+1

Vendettall, j'ai essayé mais ça n'a pas marché !

Avez-vous ce bogue ennuyeux avec la barre d'outils des en-têtes ?

Le jeu. 29 mars 2018 à 23:31, Emmanuel Fache [email protected]
a écrit:

Vendettall, j'ai essayé mais ça n'a pas marché !

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/ionic-team/ionic/issues/6228#issuecomment-377362762 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AYPMdggjRqZBZ0wghtxFjVbPLViBkR8hks5tjUSQgaJpZM4IKhUp
.

Si vous rencontrez toujours ce problème, veuillez essayer le nouveau plugin de clavier ionique

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

Ensuite, réglez

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

Dans le config.xml

Salut,
Dans l'application je travaille, tout fonctionne bien. Mais pour une raison quelconque, je dois utiliser les entrées dans le tableau html. Dans ce cas, chaque fois que je clique sur input, cela redessine le tableau et réinitialise le défilement du tableau.
Quelqu'un peut-il aider ici?

voir également le problème de transformation se produire. C'est assez ennuyeux.

Pour faire défiler pb, j'ai écrit un hack ici : https://github.com/ionic-team/ionic/issues/10629#issuecomment -395084125

Ce commentaire ci-dessus AbrahamLopez10 a commenté le 1er août 2017 a parfaitement fonctionné pour moi, faisant défiler les champs de saisie lorsque le clavier Android apparaît.

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

Salut les gars, je viens de créer une directive personnalisée pour gérer ce problème sur les plates-formes iOS et Android pour les applications Ionic 2 et 3. Pourriez-vous s'il vous plaît vérifier si cela résout tous les problèmes liés à ce problème de défilement.

J'ai utilisé ponyfill scroll-in- to

Installez la directive ion-input-scroll-into-view en exécutant la commande npm install ion-input-scroll-into-view

Étape 1
Attachez la directive ion-input-scroll-into-view à ion-input ou ion-textarea comme suit.

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

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

Étape 2

Vous devez importer le IonInputScrollIntoViewModule dans le module.ts de votre composant parent comme suit

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

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

Merci pour le problème ! Nous avons déplacé le code source et les problèmes d'Ionic 3 dans un référentiel séparé. Je déplace ce problème vers le référentiel pour Ionic 3. Veuillez suivre ce problème là-bas.

Merci d'avoir utilisé Ionic !

Problème déplacé vers : https://github.com/ionic-team/ionic-v3/issues/47