时间戳

首页 > 解决方案 > 隐藏/显示 IONIC 中输入元素焦点的页脚

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

问题描述

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

我可以将它隐藏在焦点上，但是一旦焦点消失，我想再次显示它。在这方面帮助我。提前致谢

标签： javascriptionic-frameworkionic3

解决方案

您可以使用 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;
    }

}

推荐阅读