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

问题描述

我正在使用最新版本的离子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默认值下，还有额外的功能
试图通过添加$ b $来补偿键盘slideover b填充到内容的底部（'scrollAssist'）并通过向后滚动到
（'autoFocusAssist'）将
焦点输入元素保留在视口中。 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

UPDATE II

截至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 我们还避免了一些与a相关的奇怪错误隐藏键盘后空白空间。

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屋！