【问题标题】:Keyboard Issues with Ionic4Ionic4 的键盘问题
【发布时间】:2019-08-22 23:06:57
【问题描述】:

我使用 Ionic4 开发了一个 android 应用程序。我面临的问题是当键盘出现时它覆盖了输入字段,屏幕没有向上移动。 我通过以下代码行在 Ionic 3 中解决了这个问题。但这在 Ionic4 中不起作用。请有人帮忙。

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

HTML

<div class="field-container">
    <form [formGroup]="credentialsForm" class="width-100">
        <ion-list>
            <ion-item no-padding class="transparent-border">
                <div class="logo-div">
                    <img src="assets/icon/favicon.png" class="app-logo">
                </div>
            </ion-item>
            <ion-item no-padding>
                <ion-label position="floating" color="primary">Username</ion-label>
                <ion-input type="text" color="primary" mode="ios" maxLength="5" formControlName="userName" required></ion-input>
            </ion-item>
            <span class="validation-errors" *ngIf="!credentialsForm.controls.userName.valid && (credentialsForm.controls.userName.dirty || onSaveAttempt)">Username
                is mandatory</span>
            <ion-item no-padding>
                <ion-label position="floating" color="primary">Password</ion-label>
                <ion-input color="primary" type="password" mode="ios" formControlName="password" required></ion-input>
            </ion-item>
            <span class="validation-errors" *ngIf="!credentialsForm.controls.password.valid && (credentialsForm.controls.password.dirty || onSaveAttempt)">Password
                is mandatory</span>
            <ion-item no-padding class="transparent-border">
                <div style="overflow: hidden;width: 100%">
                    <p class="create-account" (click)="doRegistrationNavigation()">Create an Account</p>
                    <p class="forgot-password">Forgot password?</p>
                </div>
            </ion-item>
        </ion-list>
    </form>
    <ion-button (click)="doLogin()" expand="block" shape="round" class="signin-button" color="vibrant">Sign
        In</ion-button>
</div>

【问题讨论】:

    标签: typescript ionic3 angular5 ionic4


    【解决方案1】:

    试试这个

    ngAfterViewInit(): void {
    window.addEventListener('keyboardDidShow', this.customScroll);
    }
    
    private customScroll() {
     this.content.scrollTo(0, 100); // 100 replaced by your value
    }
    

    【讨论】:

    • 我的申请中有超过 15 页。每一个都这样做,是不是一个好习惯?
    • 在您的根页面中完成此操作。
    • 内容应该是什么?
    • 它应该在 routerOutlet 下,所以它不是问题。试试这个。
    • 嗨!有同样的问题,但这个解决方法没有奏效。应该怎么做?
    猜你喜欢
    • 2019-06-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-06-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多