web-dev-qa-db-fra.com

Ionic 2 Form monte quand le clavier montre

J'utilise la dernière version de ionic 2 . Mon code a un <ion-content padding><form></form></ion-content> avec une entrée de texte à l'intérieur. Lorsque j'essaie de saisir quelque chose sur Android, toute la page est poussée vers le haut par le clavier.

fichier html 

<ion-content class="login-screen" padding>
  <form (ngSubmit)="login()" novalidate>
    <ion-list>
      <ion-item>
        <ion-label fixed>Username</ion-label>
        <ion-input type="text" name="username" [(ngModel)]="username" required></ion-input>
      </ion-item>
      <ion-item>
        <ion-label fixed>Password</ion-label>
        <ion-input type="password" name="password" [(ngModel)]="password" required></ion-input>
      </ion-item>
    </ion-list>
    <button ion-button full type="submit">Login</button>
  </form>
  <button ion-button clear full outline type="button" (click)="openModal()">Forgot Password?</button>
</ion-content>

y a-t-il des solutions?

angulartypescriptionic-frameworkionic2ionic3
14
tushar balar

Tout cela devrait être corrigé dans le RC4 (bientôt). Cela étant dit, pour désactiver le défilement lorsque l'entrée est activée, ajoutez ceci à votre objet de configuration (dans le @NgModule):

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

On peut trouver une très bonne explication de ces deux propriétés ici :

Sous Ionic2 par défaut, toutefois, des fonctionnalités supplémentaires sont en place essayer à la fois de compenser le glissement de clavier en ajoutant Rembourrage au bas de votre contenu ('scrollAssist') et de garder le élément d’entrée focalisé dans la fenêtre en y accédant ('autoFocusAssist'). ScrollAssist et autoFocusAssist ont bien commutateurs mis en œuvre dans la configuration qui ne semblent tout simplement pas avoir été obtenus public encore documenté.

Vous pouvez également utiliser le ionic-plugin-keyboard pour empêcher le navigateur natif de pousser/faire défiler le volet de contenu et permettre au clavier de glisser sur le contenu existant et de le recouvrir:

this.platform.ready().then(() => {
    StatusBar.styleDefault();
    Splashscreen.hide();

    Keyboard.disableScroll(false); // <- like this

    // ...

METTRE &AGRAVE; JOUR

Tout comme @Luckylooke mentionné dans les commentaires:

Keyboard.disableScroll (), ios et windows pris en charge

UPDATE II

Depuis Ionic 3.5.x, le clavier a encore quelques problèmes. J'ai constaté que la configuration suivante produit un meilleur résultat (comparé aux valeurs par défaut) du point de vue UI/UX:

@NgModule({
    declarations: [
        MyApp,
        //...
    ],
    imports: [
        //...
        IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true,
            autoFocusAssist: false
        })
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        // ...
    ],
    providers: [
        // ...
    ]
})
export class AppModule { }

En conservant scrollAssist: true, nous évitons que le clavier ne masque l'entrée si celle-ci se trouve près du bas de la page. En définissant scrollPadding: false, nous évitons également certains bugs étranges liés à un espace blanc vide après avoir masqué le clavier.

42
sebaferreras

Ajouter cette méthode au .ts sur cette page

ionViewWillEnter() {
  this.content.resize();
}

Mon scénario est le suivant: le clavier est appelé sur cette page, mais lorsque vous revenez à la page précédente, la page apparaît dans son ensemble et j'essaie de la résoudre avec cette méthode, j'utilise ionic2.

0
iamlanwenliang

il y a quelques problèmes pour les entrées et les formulaires avec le défilement comme mentionné ici je recommande donc d'attendre le prochain contrôleur régional pour que cela soit corrigé, car ce n'est pas votre simple bogue ionique dans le code.

0
Fernando Del Olmo

Ajoutez simplement ces propriétés à votre ionicModule dans app.module.ts. travaille pour moi.

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