当键盘显示时，Ionic 2 Form 上升 [英] Ionic 2 Form goes up when keyboard shows

问题描述

我使用的是最新版本的 ionic 2.我的代码有一个 <ion-content padding><form></form></ion-content> 里面有一个文本输入.当我尝试在 Android 上输入内容时，整个页面都会被键盘向上推.

I am using latest version of ionic 2. My code has a <ion-content padding><form></form></ion-content> with a text input inside of it. When I try to type something in there on Android the whole page gets pushed upwards by the keyboard.

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>

有什么解决办法吗?

推荐答案

这一切都应该在 RC4 中修复(很快).话虽如此，要在输入焦点时禁用滚动，请将其添加到您的配置对象中(在 @NgModule 中):

This all should be fixed in the RC4 (soon). That being said, to disable the scroll when input is focused, add this to your config object (in the @NgModule):

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

可以在此处找到对这两个属性的非常好的解释:

A very good explanation of those two properties can be found here:

然而，在 Ionic2 默认设置下，有额外的功能试图通过添加来补偿键盘滑动填充到内容的底部('scrollAssist')并保持通过滚动回到视口内的焦点输入元素('自动对焦辅助').scrollAssist 和 autoFocusAssist 都很好在配置中实现的开关似乎没有得到尚未公开记录.

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 阻止本机浏览器向上推动/滚动内容窗格并允许键盘滑过并覆盖现有内容:

You can also use the ionic-plugin-keyboard to stop the native browser from pushing/scrolling the content pane up and allow the keyboard to slide over and cover existing content:

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

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

    // ...

更新

就像评论中提到的@Luckylooke:

Just like @Luckylooke mentioned in the comments:

支持Keyboard.disableScroll()、ios和windows

Keyboard.disableScroll(), ios and windows supported

更新二

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

As of Ionic 3.5.x seems like the keyboard still have some issues. I've found that the following configuration produces a better result (compared with the defaults) from the UI/UX point of view:

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

通过保持 scrollAssist: true 我们避免输入在靠近页面底部时被键盘隐藏，并且通过设置 scrollPadding: false 我们也避免了隐藏键盘后一些与空白区域相关的奇怪错误.

By keeping scrollAssist: true we avoid the input to be hidden by the keyboard if it's near the bottom of the page, and by setting scrollPadding: false we also avoid some weird bugs related to an empty white space after hiding the keyboard.

这篇关于当键盘显示时，Ionic 2 Form 上升的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！