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

Keyboard

Keyboard APIは、キーボードの表示と可視性のコントロール、およびキーボードの表示/非表示時のイベントトラッキングを提供します。

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

Param Type
options { isVisible: boolean; }

setScroll(…)

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

Programmatically enable or disable the WebView scroll

Param Type
options { isDisabled: boolean; }

setStyle(…)

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

Programmatically set the keyboard style

Param Type
options KeyboardStyleOptions

setResizeMode(…)

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

Programmatically set the resize mode

Param Type
options KeyboardResizeOptions

addListener(…)

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

Returns: PluginListenerHandle


addListener(…)

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

Returns: PluginListenerHandle


addListener(…)

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

Returns: PluginListenerHandle


addListener(…)

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

Returns: PluginListenerHandle


removeAllListeners()

removeAllListeners() => void

Remove all native listeners for this plugin


Interfaces

KeyboardStyleOptions

Prop Type
style KeyboardStyle

KeyboardResizeOptions

Prop Type
mode KeyboardResize

PluginListenerHandle

Prop Type
remove () => void

KeyboardInfo

Prop Type
keyboardHeight number

Enums

KeyboardStyle

Members Value
Dark "DARK"
Light "LIGHT"

KeyboardResize

Members Value
Body "body"
Ionic "ionic"
Native "native"
None "none"
Previous
<- Haptics
Next
Local Notifications ->
Contribute ->