angular - 键盘显示时 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
    }),
    ...
],
...

关于这两个属性的很好的解释可以在 here 中找到。 :

Under Ionic2 defaults, however, there are additional features in place attempting to both compensate for the keyboard slideover by adding padding to the bottom of your content ('scrollAssist') and to keep the focused input element within the viewport by scrolling back to it ('autoFocusAssist'). Both scrollAssist and autoFocusAssist have nicely implemented switches in config that just don't appear to have gotten public documented yet.

您还可以使用 ionic-plugin-keyboard 来阻止 native 浏览器向上推送/滚动内容 Pane ，并允许键盘滑过并覆盖现有内容:

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

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

    // ...

更新

就像@Luckylooke在评论中提到的:

Keyboard.disableScroll(), ios and windows supported

更新二

从 Ionic 3.5.x 开始，键盘似乎仍然存在一些问题。我发现从 UI/UX 的 Angular 来看，以下配置会产生更好的结果(与默认设置相比):

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

通过保持 scrollAssist: true 我们可以避免输入在页面底部附近被键盘隐藏，通过设置 scrollPadding: false 我们也可以避免一些奇怪的错误与隐藏键盘后的空白区域有关。