capacitor-keyboard v1.0.0

@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

Example

import { Keyboard } from '@capacitor/keyboard';

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

Keyboard.addListener('keyboardDidShow', info => {
  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');
});

Configuration

On iOS, the keyboard can be configured with the following options:

Examples

In capacitor.config.json:

{
  "plugins": {
    "Keyboard": {
      "resize": "body",
      "style": "DARK",
      "resizeOnFullScreen": true
    }
  }
}

In capacitor.config.ts:

/// <reference types="@capacitor/keyboard" />

import { CapacitorConfig } from '@capacitor/cli';
import { KeyboardResize, KeyboardStyle } from '@capacitor/keyboard';

const config: CapacitorConfig = {
  plugins: {
    Keyboard: {
      resize: KeyboardResize.Body,
      style: KeyboardStyle.Dark,
      resizeOnFullScreen: true,
    },
  },
};

export default config;

Compatibility with cordova-plugin-ionic-keyboard

To maintain compatibility with cordova-plugin-ionic-keyboard, the following events also work with window.addEventListener:

• keyboardWillShow
• keyboardDidShow
• keyboardWillHide
• keyboardDidHide

API

• show()
• hide()
• setAccessoryBarVisible(...)
• setScroll(...)
• setStyle(...)
• setResizeMode(...)
• getResizeMode()
• addListener('keyboardWillShow', ...)
• addListener('keyboardDidShow', ...)
• addListener('keyboardWillHide', ...)
• addListener('keyboardDidHide', ...)
• removeAllListeners()
• Interfaces
• Enums

show()

show() => any

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

This method is only supported on Android.

Returns: any

Since: 1.0.0

hide()

hide() => any

Hide the keyboard.

Returns: any

Since: 1.0.0

setAccessoryBarVisible(...)

setAccessoryBarVisible(options: { isVisible: boolean; }) => any

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.

Returns: any

Since: 1.0.0

setScroll(...)

setScroll(options: { isDisabled: boolean; }) => any

Programmatically enable or disable the WebView scroll.

This method is only supported on iOS.

Returns: any

Since: 1.0.0

setStyle(...)

setStyle(options: KeyboardStyleOptions) => any

Programmatically set the keyboard style.

This method is only supported on iOS.

Returns: any

Since: 1.0.0

setResizeMode(...)

setResizeMode(options: KeyboardResizeOptions) => any

Programmatically set the resize mode.

This method is only supported on iOS.

Returns: any

Since: 1.0.0

getResizeMode()

getResizeMode() => any

Get the currently set resize mode.

This method is only supported on iOS.

Returns: any

Since: 4.0.0

addListener('keyboardWillShow', ...)

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

Listen for when the keyboard is about to be shown.

On Android keyboardWillShow and keyboardDidShow fire almost at the same time.

Returns: any

Since: 1.0.0

addListener('keyboardDidShow', ...)

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

Listen for when the keyboard is shown.

On Android keyboardWillShow and keyboardDidShow fire almost at the same time.

Returns: any

Since: 1.0.0

addListener('keyboardWillHide', ...)

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

Listen for when the keyboard is about to be hidden.

On Android keyboardWillHide and keyboardDidHide fire almost at the same time.

Returns: any

Since: 1.0.0

addListener('keyboardDidHide', ...)

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

Listen for when the keyboard is hidden.

On Android keyboardWillHide and keyboardDidHide fire almost at the same time.

Returns: any

Since: 1.0.0

removeAllListeners()

removeAllListeners() => any

Remove all native listeners for this plugin.

Returns: any

Since: 1.0.0

Interfaces

KeyboardStyleOptions

KeyboardResizeOptions

KeyboardInfo

PluginListenerHandle

Enums

KeyboardStyle

KeyboardResize