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
    }),
    ...
],
...

可以找到对这两个属性的非常好的解释here：

但是，在Ionic2默认值下，还有其他功能尝试通过添加来补偿键盘slideover 填充到内容的底部（'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

输入和表单存在一些问题，滚动就像提到here所以我建议等到下一个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中编写以下方法

db.users.find

通过NotificationCenter在viewDidLoad中调用上述方法

/////////////--------------------------//////////////
/*
 *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)];
             }
          }
     }
}

当键盘显示时，Ionic 2 Form上升

5 个答案: