时间戳

首页 > 解决方案 > Ionic 4 键盘覆盖全部内容

ionic-framework - Ionic 4 键盘覆盖全部内容

问题描述

当我点击输入键盘时，涵盖了所有内容。我需要像在whatsapp应用程序中一样在键盘上显示输入顶部/向上/上方。

 <div *ngSwitchCase="'home'">
      <!-- Show list of users -->
      <div *ngFor = "let item of data?.slice()?.reverse()">
        <!-- When the message type is text the current user sees this-->
        <div class="received chat-box" *ngIf="item.uid == user.uid">
          <h6>{{item.message}}</h6>
          <p>{{item.time.toDate() | date: "dd/MM/yyyy HH:mm a"}}</p>
        </div>
        <!-- When the message type is text friend sees this-->
        <div class="send chat-box" *ngIf="item.uid != user.uid">
          <h6>{{item.message}}</h6>
          <p>{{item.time.toDate() | date: "dd/MM/yyyy HH:mm a"}}</p>
        </div>
      </div>

      <div class="foo">
        <!-- Message text area with attachment -->
          <div class="input-wrap">

            <ion-textarea autosize
                      placeholder="Type Message here"
                      [(ngModel)]="newmessage"
                      (focusin)="onFocus()"
                      >
            </ion-textarea>
            <ion-button fill="clear" slot="end" color="dark" (click)="addmessage()" [disabled]="!newmessage">
              <ion-icon src="\assets\icon\send.svg"></ion-icon>
            </ion-button>
          </div>
      </div>
  </div>

任何人请告诉任何技巧来解决它。谢谢

标签： ionic-framework

解决方案

检查您的 package.json 文件，确保您的 cordova 插件键盘版本为“^2.2.0”或更高版本。你可以简单地删除它

ionic cordova plugin rm cordova-plugin-ionic-keyboard

添加方式

ionic cordova plugin add cordova-plugin-ionic-keyboard@2.2.0

然后它会正常工作，因为我尝试了其他以下版本并且这些版本存在问题。

在 ionic@5.4.6 和 cordova@9.0.0 工作正常

推荐阅读