A one day, single-track online event celebrating the future of cross-platform app development

DocsプラグインCLI

@capacitor/keyboard

キーボードAPIは、キーボードの表示・非表示の制御、およびキーボードの表示・非表示時のイベントトラッキングを行います。

インストール

npm install @capacitor/keyboard
npx cap sync

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:

Prop Type Description Default Since
resize KeyboardResize Configure the way the app is resized when the Keyboard appears. Only available on iOS. native 1.0.0
style 'dark' | 'light' Override the keyboard style if your app doesn’t support dark/light theme changes. If not set, the keyboard style will depend on the device appearance. Only available on iOS. 1.0.0

例s

In capacitor.config.json:

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

In capacitor.config.ts:

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

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    Keyboard: {
      resize: "body",
      style: "dark",
    },
  },
};

export = 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()

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(‘keyboardWillShow’, …)

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

Listen for when the keyboard is about to be shown.

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

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0


addListener(‘keyboardDidShow’, …)

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

Listen for when the keyboard is shown.

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

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0


addListener(‘keyboardWillHide’, …)

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

Listen for when the keyboard is about to be hidden.

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

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0


addListener(‘keyboardDidHide’, …)

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

Listen for when the keyboard is hidden.

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

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0


removeAllListeners()

removeAllListeners() => Promise<void>

Remove all native listeners for this plugin.

Since: 1.0.0


Interfaces

KeyboardStyleOptions

Prop Type Description Default Since
style KeyboardStyle Style of the keyboard. KeyboardStyle.Default 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 () => Promise<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
Default 'DEFAULT' On iOS 13 and newer the keyboard style is based on the device appearance. If the device is using Dark mode, the keyboard will be dark. If the device is using Light mode, the keyboard will be light. On iOS 12 the keyboard will be light. 1.0.0

KeyboardResize

Members Value Description Since
Body 'body' Only the body HTML element will be resized. Relative units are not affected, because the viewport does not change. 1.0.0
Ionic 'ionic' Only the ion-app HTML element will be resized. Use it only for Ionic Framework apps. 1.0.0
Native 'native' The whole native Web View will be resized when the keyboard shows/hides. This affects the vh relative unit. 1.0.0
None 'none' Neither the app nor the Web View are resized. 1.0.0
Previous
<- Haptics
Next
ローカル通知 ->
Contribute ->