How to hide the keyboard?

Ionic Framework ionic-v3
1

Hello,
first of all sorry if my question is stupid but I’m new to Ionic, Angular and TypeScript.
I’m desperately trying to hide the keyboard after the user hits ‘return’ from my search bar and nothing that I’ve tried so far worked.

I’ve followed these steps https://ionicframework.com/docs/native/keyboard/ but whenever I call an instance, it doesn’t work.

For example : this.keyboard.show()

My “search.ts” has “import { Keyboard } from '@ionic-native/keyboard'”

  constructor(public navCtrl: NavController, public navParams: NavParams, public api: ApiProvider, public keyboard: Keyboard) {
  }

And wherever I call “keyboard.show()”

Can anybody explain me why ?

Thank you

2

Anyone knows :frowning:?

3

Try to change the focus from the input box to any other control. I think keyboard will hide automaticaly when the focus change

1 Like
4

try with this :

.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';
import { DatePicker } from '@ionic-native/date-picker';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public keyboard : Keyboard, public datePicker : DatePicker) {

  }

  today : any;
  openDatepicker(){
    this.keyboard.close();
    this.datePicker.show({
      date: new Date(),
      mode: 'date',
      androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT
    }).then(
      date => {
        this.today=date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear()},
      err => console.log('Error occurred while getting date: ', err)
    );
  }

}

.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-item>
      <ion-label>DOB</ion-label>
      <ion-input disabled="true" type="text" name="DOB" (click)="openDatepicker()" [(ngModel)]="today" ng-readonly></ion-input>
    </ion-item>
</ion-content>