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

Question

我是离子技术的新手，我试图在键盘对准输入元素的焦点后隐藏菜单。

<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;
    }

}