Skip to main content
Version: v2

Keyboard

The Keyboard API provides keyboard display and visibility control, along with event tracking when the keyboard shows and hides.

Window Events for cordova-plugin-ionic-keyboard compatibility

  • keyboardWillShow
  • keyboardDidShow
  • keyboardWillHide
  • keyboardDidHide

Example

import { Plugins, KeyboardInfo } from '@capacitor/core';

const { Keyboard } = Plugins;

// Keyboard Plugin Events

Keyboard.addListener('keyboardWillShow', (info: KeyboardInfo) => {
  console.log('keyboard will show with height', info.keyboardHeight);
});

Keyboard.addListener('keyboardDidShow', (info: KeyboardInfo) => {
  console.log('keyboard did show with height', info.keyboardHeight);
});

Keyboard.addListener('keyboardWillHide', () => {
  console.log('keyboard will hide');
});

Keyboard.addListener('keyboardDidHide', () => {
  console.log('keyboard did hide');
});

// window events

window.addEventListener('keyboardWillShow', (e) => {
  console.log('keyboard will show with height', (<any>e).keyboardHeight);
});

window.addEventListener('keyboardDidShow', (e) => {
  console.log('keyboard did show with height', (<any>e).keyboardHeight);
});

window.addEventListener('keyboardWillHide', () => {
  console.log('keyboard will hide');
});

window.addEventListener('keyboardDidHide', () => {
  console.log('keyboard did hide');
});

// API

Keyboard.setAccessoryBarVisible({ isVisible: false });

Keyboard.show();

Keyboard.hide();

Keyboard configuration (iOS only)

The keyboard plugin allows the following configuration values to be added in capacitor.config.json for the iOS platform:

  • resize: It configures the way the app is resized when the Keyboard appears. Allowed values are

    • none: Not the app, nor the webview are resized
    • native: (default) The whole native webview will be resized when the keyboard shows/hides, it will affect the vh relative unit.
    • body: Only the html <body> element will be resized. Relative units are not affected, because the viewport does not change.
    • ionic: Only the html ion-app element will be resized. Use it only for ionic apps.

  • style: If set to dark it will use Dark style keyboard instead of the regular one.

{
  "plugins": {
    "Keyboard": {
      "resize": "body",
      "style": "dark"
    }
  }
}

API

show()

show() => Promise<void>

Show the keyboard. This method is alpha and may have issues

hide()

hide() => Promise<void>

Hide the keyboard.

setAccessoryBarVisible(...)

setAccessoryBarVisible(options: { isVisible: boolean; }) => Promise<void>

Set whether the accessory bar should be visible on the keyboard. We recommend disabling the accessory bar for short forms (login, signup, etc.) to provide a cleaner UI

ParamType
options{ isVisible: boolean; }

setScroll(...)

setScroll(options: { isDisabled: boolean; }) => Promise<void>

Programmatically enable or disable the WebView scroll

ParamType
options{ isDisabled: boolean; }

setStyle(...)

setStyle(options: KeyboardStyleOptions) => Promise<void>

Programmatically set the keyboard style

ParamType
optionsKeyboardStyleOptions

setResizeMode(...)

setResizeMode(options: KeyboardResizeOptions) => Promise<void>

Programmatically set the resize mode

ParamType
optionsKeyboardResizeOptions

addListener(...)

addListener(eventName: 'keyboardWillShow', listenerFunc: (info: KeyboardInfo) => void) => PluginListenerHandle
ParamType
eventName"keyboardWillShow"
listenerFunc(info: KeyboardInfo) => void

Returns: PluginListenerHandle

addListener(...)

addListener(eventName: 'keyboardDidShow', listenerFunc: (info: KeyboardInfo) => void) => PluginListenerHandle
ParamType
eventName"keyboardDidShow"
listenerFunc(info: KeyboardInfo) => void

Returns: PluginListenerHandle

addListener(...)

addListener(eventName: 'keyboardWillHide', listenerFunc: () => void) => PluginListenerHandle
ParamType
eventName"keyboardWillHide"
listenerFunc() => void

Returns: PluginListenerHandle

addListener(...)

addListener(eventName: 'keyboardDidHide', listenerFunc: () => void) => PluginListenerHandle
ParamType
eventName"keyboardDidHide"
listenerFunc() => void

Returns: PluginListenerHandle

removeAllListeners()

removeAllListeners() => void

Remove all native listeners for this plugin

Interfaces

KeyboardStyleOptions

PropType
styleKeyboardStyle

KeyboardResizeOptions

PropType
modeKeyboardResize

PluginListenerHandle

PropType
remove() => void

KeyboardInfo

PropType
keyboardHeightnumber

Enums

KeyboardStyle

MembersValue
Dark"DARK"
Light"LIGHT"

KeyboardResize

MembersValue
Body"body"
Ionic"ionic"
Native"native"
None"none"

Contents

Edit this page