メインコンテンツまでスキップ
バージョン: v8

@capacitor/keyboard

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

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');
});

設定​

iOSでは、キーボードは以下のオプションで設定できます：

プロパティ型説明デフォルトSince
resize
KeyboardResize
キーボードが表示されたときのアプリのリサイズ方法を設定します。iOSのみで使用可能です。native1.0.0
style
KeyboardStyle
アプリがダーク/ライトテーマの変更をサポートしていない場合、キーボードスタイルを上書きします。設定されていない場合、キーボードスタイルはデバイスの外観に依存します。iOSのみで使用可能です。1.0.0
resizeOnFullScreenbooleanアプリがフルスクリーンの場合（例：StatusBarプラグインを使用してステータスバーをオーバーレイしている場合）、キーボードがWebViewをリサイズできないAndroidのバグがあります。この設定をtrueに設定すると、アプリがフルスクリーンでもWebViewをリサイズするワークアラウンドが追加されます。Androidのみで使用可能です。1.1.0

設定例​

capacitor.config.jsonでの設定：

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

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()​

show() => Promise<void>

Show the keyboard.

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.

ParamType
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.

ParamType
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.

ParamType
options
KeyboardStyleOptions

Since: 1.0.0

setResizeMode(...)​

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

Programmatically set the resize mode.

This method is only supported on iOS.

ParamType
options
KeyboardResizeOptions

Since: 1.0.0

getResizeMode()​

getResizeMode() => Promise<KeyboardResizeOptions>

Get the currently set resize mode.

This method is only supported on iOS.

Returns: 

Promise<KeyboardResizeOptions>

Since: 4.0.0

addListener('keyboardWillShow', ...)​

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

Listen for when the keyboard is about to be shown.

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

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

Returns: 

Promise<PluginListenerHandle>

Since: 1.0.0

addListener('keyboardDidShow', ...)​

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

Listen for when the keyboard is shown.

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

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

Returns: 

Promise<PluginListenerHandle>

Since: 1.0.0

addListener('keyboardWillHide', ...)​

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

Listen for when the keyboard is about to be hidden.

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

ParamType
eventName'keyboardWillHide'
listenerFunc() => void

Returns: 

Promise<PluginListenerHandle>

Since: 1.0.0

addListener('keyboardDidHide', ...)​

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

Listen for when the keyboard is hidden.

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

ParamType
eventName'keyboardDidHide'
listenerFunc() => void

Returns: 

Promise<PluginListenerHandle>

Since: 1.0.0

removeAllListeners()​

removeAllListeners() => Promise<void>

Remove all native listeners for this plugin.

Since: 1.0.0

Interfaces​

KeyboardStyleOptions​

PropTypeDescriptionDefaultSince
style
KeyboardStyle
Style of the keyboard.KeyboardStyle.Default1.0.0

KeyboardResizeOptions​

PropTypeDescriptionSince
mode
KeyboardResize
Mode used to resize elements when the keyboard appears.1.0.0

PluginListenerHandle​

PropType
remove() => Promise<void>

KeyboardInfo​

PropTypeDescriptionSince
keyboardHeightnumberHeight of the keyboard.1.0.0

Enums​

KeyboardStyle​

MembersValueDescriptionSince
Dark'DARK'Dark keyboard.1.0.0
Light'LIGHT'Light keyboard.1.0.0
Default'DEFAULT'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.1.0.0

KeyboardResize​

MembersValueDescriptionSince
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

Contents

このページを編集