CODEWITHSUNDEEP
javascriptionic-frameworkionic3
nikita
nikita

Reputation: 277

Hide/Show footer on the focus of input elements in IONIC

I am new to ionic, I am trying to hide menu once the keypad is up on-focus of input element.

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

In ts file

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

Css

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

I am able to hide it onfocus but once the focus is gone I want to show this again. Help me in this. Thanks in advance

Upvotes: 0

Views: 1771

Answers (1)

Paresh Gami
Paresh Gami

Reputation: 4782

You can use ionFocus and ionBlur with hidden in ion-footer like below example

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

}

Upvotes: 3

Related Questions