鍵盤顯示時，Ionic 2 Form上升

Question

我正在使用最新版本的ionic2。我的代碼包含一個<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

    // ...

UPDATE

就像評論中提到的@Luckylooke一樣：

支持Keyboard.disableScroll（），iOS和Windows

更新二

從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

有輸入和形式與像被提到的滾動一些問題， 在這里 ，所以我建議等待下一個RC來得到固定，導致其不是你的代碼故障的只是離子的bug。

Answer 3

將此方法添加到此頁面上的.ts

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

我的情況是：在此頁面上調用了鍵盤，但是當您返回上一頁時，該頁面將作為一個整體出現，並且我嘗試使用此方法解決它，我使用ionic2。

Answer 4

只需將此屬性添加到app.module.ts中的ionicModule中即可。 為我工作。

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

Answer 5

從Ionic項目的iOS平台打開iOS工作區，並在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)];
             }
          }
     }
}

通過NotificationCenter在viewDidLoad中調用上述方法

- (void)viewDidLoad
{
    [super viewDidLoad];

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

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