javascript - 隐藏/显示 IONIC 中输入元素焦点上的页脚

Question

我是 ionic 新手，一旦键盘成为输入元素的焦点，我就会尝试隐藏菜单。

<ion-input class="inputtext" formControlName="wateratSlump"  (ionFocus)="checkFocus()" type="number" tabindex="1">
</ion-input>

在ts文件中

  checkFocus(){
    document.body.classList.add('keyboard-open');
  }

CSS

.keyboard-open{
  ion-footer{
    display: none;
  }
}

我可以在焦点上隐藏它，但是一旦焦点消失，我想再次显示它。帮我解决这个问题。提前致谢

Answer 1

您可以使用 ionFocus 和 ionBlur 隐藏在 ion-footer 中，如下例所示

html

<ion-content>
    <ion-input class="inputtext" (ionFocus)="checkFocus()" type="number" tabindex="1" (ionBlur)="checkBlur()">
    </ion-input>
</ion-content>

<ion-footer>
    <button class="proceed" [hidden]="isShown" ion-button full (click)="proceedPayment()">Proceed</button>
</ion-footer>

ts

export class HomePage {

    isShown = false;
    constructor(public navCtrl: NavController) {

    }

    checkFocus(){
        this.isShown = true;
    }

    checkBlur() {
        this.isShown = false;
    }

}