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
options
KeyboardStyleOptions

setResizeMode(...)

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

Programmatically set the resize mode

ParamType
options
KeyboardResizeOptions

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
style
KeyboardStyle

KeyboardResizeOptions

PropType
mode
KeyboardResize

PluginListenerHandle

PropType
remove() => void

KeyboardInfo

PropType
keyboardHeightnumber

Enums

KeyboardStyle

MembersValue
Dark"DARK"
Light"LIGHT"

KeyboardResize

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