当键盘显示时，离子2形式上升。

Question

我使用的是最新版本的离子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

对于输入和表单有一些问题，比如提到了在这里，所以我建议等待下一个RC来解决这个问题，因为它不仅仅是代码错误的离子错误。

Answer 3

将此方法添加到此页面的.ts中

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

我的场景是:键盘在这个页面上被调用，但是当您返回到上一个页面时，页面将作为一个整体出现，我尝试用这个方法来解决这个问题，我使用ionic2。