Ionic 2 Form si alza quando la tastiera mostra

Sto usando l’ultima versione di ionic 2. Il mio codice ha un

con un input di testo al suo interno. Quando provo a digitare qualcosa su Android, l’intera pagina viene spinta verso l’alto dalla tastiera.

file html

  
Username Password

c’è qualche soluzione?

Tutto ciò dovrebbe essere risolto in RC4 (presto). Detto questo, per disabilitare lo scroll quando l’input è focalizzato, aggiungilo al tuo object config (nel @NgModule ):

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

Una buona spiegazione di queste due proprietà può essere trovata qui :

Sotto i valori predefiniti di Ionic2, tuttavia, ci sono altre funzionalità in atto che tentano di compensare il cursore della tastiera aggiungendo il riempimento alla base del contenuto (“scrollAssist”) e di mantenere l’elemento di input focalizzato all’interno del viewport scorrendo di nuovo su di esso ( ‘autoFocusAssist’). Sia scrollAssist che autoFocusAssist hanno implementato opportunamente gli switch in config che non sembrano essere ancora stati documentati pubblicamente.

Puoi anche utilizzare la ionic-plugin-keyboard con ionic-plugin-keyboard per impedire al browser nativo di spostare / scorrere il riquadro del contenuto verso l’alto e consentire alla tastiera di scorrere e coprire il contenuto esistente:

 this.platform.ready().then(() => { StatusBar.styleDefault(); Splashscreen.hide(); Keyboard.disableScroll(false); // <- like this // ... 

AGGIORNARE

Proprio come @Luckylooke menzionato nei commenti:

Keyboard.disableScroll (), ios e windows supportati

AGGIORNAMENTO II

A partire da Ionic 3.5.x sembra che la tastiera abbia ancora dei problemi. Ho trovato che la seguente configurazione produce un risultato migliore (rispetto ai valori predefiniti) dal punto di vista UI / UX:

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

Mantenendo scrollAssist: true evitiamo che l'input venga nascosto dalla tastiera se è vicino alla parte inferiore della pagina e impostando scrollPadding: false evitiamo anche alcuni bug strani relativi a uno spazio vuoto vuoto dopo aver nascosto la tastiera.

ci sono alcuni problemi per gli input e le forms con lo scrolling come è menzionato qui quindi ti consiglio di attendere il prossimo RC per ottenere quello corretto, perché non è il tuo errore di codice solo un bug ionico.

Aggiungi questo metodo a .ts in questa pagina

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

Il mio scenario è: la tastiera viene chiamata su questa pagina, ma quando si ritorna alla pagina precedente, la pagina apparirà nel suo complesso, e io cerco di risolverlo con questo metodo, io uso ionic2.

Basta aggiungere queste proprietà al tuo ionicModule in app.module.ts. per me va bene.

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