【问题标题】:Keyboard issues with Ionic3Ionic3 的键盘问题
【发布时间】:2018-06-11 18:16:01
【问题描述】:

我遇到了键盘问题。我有一个包含 5 个输入字段的列表的页面。当键盘显示时页面向上推,当键盘隐藏时页面位置保持不变。当我检查它时,显示即使在键盘隐藏之后也存在padding-bottom:300px。 有没有相同的解决方案?请在下面找到html代码

<ion-content padding #content>
<img src="assets/imgs/ic_tutorial_three.png" style="height:150px;width:150px">
<ion-card>
  <ion-item>
      <ion-avatar item-end class="margin-bottom-none" *ngIf="validCurrentKey">
          <img src="assets/imgs/ic_tick.png" class="tick-button">
        </ion-avatar>
    <ion-label color="primary" stacked>Your Current PIN</ion-label>
    <ion-input type="password" placeholder="PIN" (ionChange)='checkCurrentPassword($event)'></ion-input>
  </ion-item>
  <ion-item >
    <ion-label color="primary" stacked>Enter Your New PIN</ion-label>
    <ion-input type="password" placeholder="PIN"  [(ngModel)]="newPin"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label color="primary" stacked>RE-Enter Your New PIN</ion-label>
    <ion-input type="password" placeholder="PIN"  (ionChange)="validateNewPassword($event)"></ion-input>
  </ion-item>
</ion-card>
<div class="bottom-button"> 
    <button ion-button round full class="submit-button"  (click)="goBack()" >UPDATE PIN</button>
</div>

我对这个问题有同样的问题ionic 3 -Keyboard pushes the whole screen up

【问题讨论】:

    标签: keyboard ionic3


    【解决方案1】:

    由于输入字段获得焦点时滚动而发生此行为。

    要在输入焦点时禁用滚动,请将以下代码添加到项目的“app.module.ts”文件中:

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

    还可以查看以下链接以获取详细说明: https://stackoverflow.com/a/41163695/6862286

    【讨论】:

    • 我也做了同样的事情并点击了链接。但是当键盘关闭时问题就来了。 padding-bottom 300px 仍然存在
    • 您能验证一下吗?
    • 我已经在一个演示应用中验证了它,它工作正常。
    猜你喜欢
    • 2017-11-23
    • 2019-08-22
    • 1970-01-01
    • 1970-01-01
    • 2011-06-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多