Форма Ionic 2 поднимается, когда клавиатура показывает

Я использую последнюю версию ионной 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>

существуют ли какие-либо решения?

Ответ 1

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

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

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

В соответствии с настройками 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(), ios и поддерживаемые окна

ОБНОВЛЕНИЕ II

По сравнению с Ionic 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, мы также избегаем некоторых странных ошибок, связанных с пустым пробелом после скрытия клавиатуры.

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

Просто добавьте эти свойства в свой ionicModule в app.module.ts. работает для меня.

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

Ответ 5

Откройте рабочее пространство iOS на платформе iOS проекта Ionic и напишите метод ниже в MainViewController.m

/////////////--------------------------//////////////
/*
 *Description: this method was trigger by selector keyboarwillhide from notification
 */
-(void)keyboardWillHide
{
    if (@available(iOS 12.0, *)) {
        WKWebView *webview = (WKWebView*)self.webView;
         for(UIView* v in webview.subviews){
            if([v isKindOfClass:NSClassFromString(@"WKScrollView")]){
                UIScrollView *scrollView = (UIScrollView*)v;
                [scrollView setContentOffset:CGPointMake(0, 0)];
             }
          }
     }
}

Вызовите вышеуказанный метод в viewDidLoad через NotificationCenter

- (void)viewDidLoad
{
    [super viewDidLoad];

    /**
     * observer notification when keyboard will hide
     */

    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWillHide)
                                                 name:UIKeyboardWillHideNotification
                                               object:nil];
}