Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Keyboard

Improve this doc

The Keyboard class allows you to work with the keyboard events provided by the Ionic keyboard plugin.

Usage

export class MyClass {

  constructor(public keyboard: Keyboard) { }

}

Instance Members

close()

Programmatically close the keyboard.

didHide

didShow

eventsAvailable

hasFocusedTextInput()

hideFormAccessoryBar(hidden)

Set to true to hide the additional toolbar that is on top of the keyboard. This toolbar features the Prev, Next, and Done buttons.

Param Type Details
hidden

isOpen()

Check to see if the keyboard is open or not.

export class MyClass {
  constructor(public keyboard: Keyboard) {

  }

  keyboardCheck() {
    console.log('The keyboard is open:', this.keyboard.isOpen());
  }
}
Returns: boolean

returns a true or false value if the keyboard is open or not.

onClose(callback)

When the keyboard is closed, call any methods you want.

export class MyClass {
  constructor(public keyboard: Keyboard) {
    this.keyboard.onClose(this.closeCallback);
  }
  closeCallback() {
    // call what ever functionality you want on keyboard close
    console.log('Closing time');
  }
}
Param Type Details
callback function

method you want to call when the keyboard has been closed.

Returns: function

returns a callback that gets fired when the keyboard is closed.

willHide

willShow

Sass Variables

Property Default Description
$cordova-statusbar-padding-modal-max-width 767px

The breakpoint when a modal becomes inset

Property Default Description
$cordova-ios-statusbar-padding 20px

Height of the Statusbar

$cordova-ios-statusbar-padding-modal-max-width $cordova-statusbar-padding-modal-max-width

The breakpoint when a modal becomes inset

Property Default Description
$cordova-md-statusbar-padding 20px

Height of the Statusbar

$cordova-md-statusbar-padding-modal-max-width $cordova-statusbar-padding-modal-max-width

The breakpoint when a modal becomes inset

Property Default Description
$cordova-wp-statusbar-padding 20px

Height of the Statusbar

$cordova-wp-statusbar-padding-modal-max-width $cordova-statusbar-padding-modal-max-width

The breakpoint when a modal becomes inset

API

Native

General