Ionic 4键盘涵盖了全部内容

时间:2019-12-05 00:28:52

标签: ionic-framework

当我单击输入键盘时,将覆盖所有内容。我需要像在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>

任何人请告诉任何解决方法。谢谢

1 个答案:

答案 0 :(得分:1)

检查您的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上工作正常