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

Это все должно быть исправлено в 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

    // ...

ОБНОВИТЬ

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

Keyboard.disableScroll (), IOS и Windows поддерживается

ОБНОВЛЕНИЕ 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 мы также избегаем некоторых странных ошибок, связанных с пустым пробелом после сокрытия клавиатуры.

Answer 2

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

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

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

Answer 3

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

Answer 4

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

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

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