键盘显示时，Ionic 2 Form上升

Question

我正在使用最新版本的ionic2。我的代码包含一个<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

    // ...

UPDATE

就像评论中提到的@Luckylooke一样：

支持Keyboard.disableScroll（），iOS和Windows

更新二

从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来得到固定，导致其不是你的代码故障的只是离子的bug。

Answer 3

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

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

我的情况是：在此页面上调用了键盘，但是当您返回上一页时，该页面将作为一个整体出现，并且我尝试使用此方法解决它，我使用ionic2。

Answer 4

只需将此属性添加到app.module.ts中的ionicModule中即可。 为我工作。

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

Answer 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];
}