See how Capacitor fits into the entire Ionic Ecosystem ->
Capacitor is part of the Ionic Ecosystem ->

@capacitor/keyboard

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

Install

npm install @capacitor/keyboard
npx cap sync

API

show()

show() => Promise<void>

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

This method is only supported on Android.

Since: 1.0.0


hide()

hide() => Promise<void>

Hide the keyboard.

Since: 1.0.0


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.

This method is only supported on iPhone devices.

Param Type
options { isVisible: boolean; }

Since: 1.0.0


setScroll(…)

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

Programmatically enable or disable the WebView scroll.

This method is only supported on iOS.

Param Type
options { isDisabled: boolean; }

Since: 1.0.0


setStyle(…)

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

Programmatically set the keyboard style.

This method is only supported on iOS.

Param Type
options KeyboardStyleOptions

Since: 1.0.0


setResizeMode(…)

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

Programmatically set the resize mode.

This method is only supported on iOS.

Param Type
options KeyboardResizeOptions

Since: 1.0.0


addListener(…)

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

Listen for when the keyboard is about to be shown.

Param Type
eventName "keyboardWillShow"
listenerFunc (info: KeyboardInfo) => void

Returns: PluginListenerHandle

Since: 1.0.0


addListener(…)

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

Listen for when the keyboard is shown.

Param Type
eventName "keyboardDidShow"
listenerFunc (info: KeyboardInfo) => void

Returns: PluginListenerHandle

Since: 1.0.0


addListener(…)

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

Listen for when the keyboard is about to be hidden.

Param Type
eventName "keyboardWillHide"
listenerFunc () => void

Returns: PluginListenerHandle

Since: 1.0.0


addListener(…)

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

Listen for when the keyboard is hidden.

Param Type
eventName "keyboardDidHide"
listenerFunc () => void

Returns: PluginListenerHandle

Since: 1.0.0


removeAllListeners()

removeAllListeners() => void

Remove all native listeners for this plugin.

Since: 1.0.0


Interfaces

KeyboardStyleOptions

Prop Type Description Since
style KeyboardStyle Style of the keyboard. 1.0.0

KeyboardResizeOptions

Prop Type Description Since
mode KeyboardResize Mode used to resize elements when the keyboard appears. 1.0.0

PluginListenerHandle

Prop Type
remove () => void

KeyboardInfo

Prop Type Description Since
keyboardHeight number Height of the heyboard. 1.0.0

Enums

KeyboardStyle

Members Value Description Since
Dark 'DARK' Dark keyboard. 1.0.0
Light 'LIGHT' Light keyboard. 1.0.0

KeyboardResize

Members Value Description Since
Body 'body' Resizes the html body. 1.0.0
Ionic 'ionic' Resizes Ionic app 1.0.0
Native 'native' Resizes the WebView. 1.0.0
None 'none' Don’t resize anything. 1.0.0
Previous
<- Haptics
Next
Motion ->