键盘显示时Ionic 2 Form上升答案

【问题标题】：Ionic 2 Form goes up when keyboard shows键盘显示时Ionic 2 Form上升
【发布时间】：2017-04-30 21:51:43
【问题描述】：

我正在使用最新版本的 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>

有什么解决办法吗？

【问题讨论】：

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

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

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

这两个属性的一个很好的解释可以在here找到：

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

您还可以使用ionic-plugin-keyboard 阻止本机浏览器向上推动/滚动内容窗格，并允许键盘滑过并覆盖现有内容：

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

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

    // ...

更新

就像在 cmets 中提到的@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，我们还可以避免一些与隐藏键盘后空白相关的奇怪错误。

【讨论】：

注：Keyboard.disableScroll()，支持ios和windows
感谢@Luckylooke，我已将该信息添加到答案中：)
如果页面有多个输入字段和页脚上有一个按钮，上述解决方案是否有效？
@sebaferreras，问题仍然存在
没关系解决它，正在使用 top 和我删除的其他一些属性并且它有效

【解决方案2】：

滚动输入和表单存在一些问题，就像提到的 here 所以我建议等到下一个 RC 来解决这个问题，因为它不是你的代码错误，只是离子错误。

【讨论】：

但我认为有一些方法可以在输入集中时禁用滚动。但我不知道它是如何固定的。

【解决方案3】：

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

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

我的场景是：在这个页面上调用了键盘，但是当你回到上一页时，页面会呈现为一个整体，我尝试用这个方法解决，我用ionic2。

【讨论】：

【解决方案4】：

只需将此属性添加到 app.module.ts 中的 ionicModule 即可。对我有用。

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

【讨论】：

【解决方案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];
}

【讨论】：