Ionic 2 Form поднимается, когда на клавиатуре отображаются

Question

Я использую последнюю версию ionic 2. В моем коде есть <ion-content padding><form></form></ion-content> с внутренним текстом. Когда я пытаюсь ввести что-то там на Android, вся страница подталкивается вверх клавиатурой.

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> 

есть какое-либо решение?

Answer 1

Есть некоторые проблемы для входов и форм с прокруткой, как указано here, поэтому я рекомендую подождать до следующего RC, чтобы зафиксировать это, потому что это не ошибка вашего кода, а только ионная ошибка.

Answer 2

Это все должно быть исправлено в RC4 (вскоре). При этом, чтобы отключить прокрутку, когда вход будет сфокусирован, добавьте в ваш конфигурационный объект (в @NgModule):

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

Очень хорошее объяснение этих двух свойств можно найти here:

В соответствии с по умолчанию Ionic2 есть дополнительные функции , пытающиеся как компенсировать смену клавиатуры, добавив отступы в нижней части вашего содержимого ('scrollAssist'), и сохранить фокусный элемент ввода в окне просмотра, прокручивая назад к нему ('autoFocusAssist'). И scrollAssist, и autoFocusAssist имеют приятные реализованные коммутаторы в конфигурации, которые, похоже, пока не получили общедоступных.

Вы также можете использовать ionic-plugin-keyboard, чтобы остановить родной браузер от толкания/прокрутки содержимого панели и позволяет клавиатуре скользить и накройте существующий контент:

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

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

    // ... 

UPDATE

Так же, как @Luckylooke упоминается в комментариях:

Keyboard.disableScroll(), ИОС и окна поддерживаются

UPDATE II

В ионных 3.5.x кажется, что клавиатура все еще есть некоторые проблемы. Я обнаружил, что следующая конфигурация дает лучший результат (по сравнению с параметрами по умолчанию) из UI/точки UX зрения:

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

Сохраняя scrollAssist: true мы избегаем вход быть скрыты с помощью клавиатуры, если это рядом в нижней части страницы, и, установив scrollPadding: false, мы также избегаем некоторых странных ошибок, связанных с пустым пробелом после скрытия клавиатуры.

Answer 3

Добавьте этот метод в.TS на этой странице

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

Мой сценарий: клавиатура вызывается на этой странице, но когда вы вернетесь к предыдущей странице, страница будет выглядеть как в целом, и я пытаюсь решить с помощью этого метода, Я использую ionic2.