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

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

設定​

iOS では、キーボードは次のオプションで設定できます。

プロパティタイプ説明デフォルトバージョン
resizeKeyboardResizeキーボードが表示されたときにアプリのサイズを変更する方法を設定します。iOS でのみ利用可能です。native1.0.0
styleKeyboardStyleアプリがダーク/ライトテーマの変更に対応していない場合、キーボードのスタイルを上書きします。設定されていない場合、キーボードのスタイルはデバイスの外観に依存します。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;

cordova-plugin-ionic-keyboard との互換性​

cordova-plugin-ionic-keyboard との互換性を維持するために、以下のイベントは window.addEventListener でも動作します。

  • keyboardWillShow
  • keyboardDidShow
  • keyboardWillHide
  • keyboardDidHide

API​

show()​

show() => Promise<void>

キーボードを表示します。このメソッドはアルファ版であり、問題が発生する可能性があります。

このメソッドはAndroidでのみサポートされています。

バージョン 1.0.0

hide()​

hide() => Promise<void>

キーボードを非表示にします。

バージョン 1.0.0

setAccessoryBarVisible(...)​

setAccessoryBarVisible(options: { isVisible: boolean; }) => Promise<void>

キーボードにアクセサリバーを表示するかどうかを設定します。よりクリーンなUIを提供するために、短いフォーム（ログイン、サインアップなど）ではアクセサリバーを無効にすることをお勧めします。

このメソッドは、iPhone デバイスでのみサポートされています。

パラメータタイプ
options{ isVisible: boolean; }

バージョン 1.0.0

setScroll(...)​

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

プログラムで WebView のスクロールを有効または無効にします。

このメソッドは iOS でのみサポートされています。

パラメータタイプ
options{ isDisabled: boolean; }

バージョン 1.0.0

setStyle(...)​

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

プログラムでキーボードスタイルを設定します。

このメソッドは iOS でのみサポートされています。

パラメータタイプ
optionsKeyboardStyleOptions

バージョン 1.0.0

setResizeMode(...)​

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

プログラムでサイズ変更モードを設定します。

このメソッドは iOS でのみサポートされています。

パラメータタイプ
optionsKeyboardResizeOptions

バージョン 1.0.0

getResizeMode()​

getResizeMode() => Promise<KeyboardResizeOptions>

現在設定されているサイズ変更モードを取得します。

このメソッドは iOS でのみサポートされています。

戻り値: Promise<KeyboardResizeOptions>

バージョン 4.0.0

addListener('keyboardWillShow', ...)​

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

キーボードが表示されようとしているときにリッスンします。

Android では、keyboardWillShow と keyboardDidShow はほぼ同時に発生します。

パラメータタイプ
イベント名'keyboardWillShow'
リスナー関数(info: KeyboardInfo) => void

戻り値: Promise<PluginListenerHandle>

バージョン 1.0.0

addListener('keyboardDidShow', ...)​

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

キーボードが表示されたときにリッスンします。

Android では、keyboardWillShow と keyboardDidShow はほぼ同時に発生します。

パラメータタイプ
イベント名'keyboardDidShow'
リスナー関数(info: KeyboardInfo) => void

戻り値: Promise<PluginListenerHandle>

バージョン 1.0.0

addListener('keyboardWillHide', ...)​

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

キーボードが非表示になろうとしているときにリッスンします。

Android では、keyboardWillHide と keyboardDidHide はほぼ同時に発生します。

パラメータタイプ
イベント名'keyboardWillHide'
リスナー関数() => void

戻り値: Promise<PluginListenerHandle>

バージョン 1.0.0

addListener('keyboardDidHide', ...)​

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

キーボードが非表示になったときにリッスンします。

Android では、keyboardWillHide と keyboardDidHide はほぼ同時に発生します。

パラメータタイプ
イベント名'keyboardDidHide'
リスナー関数() => void

戻り値: Promise<PluginListenerHandle>

バージョン 1.0.0

removeAllListeners()​

removeAllListeners() => Promise<void>

このプラグインのすべてのネイティブリスナーを削除します。

バージョン 1.0.0

インターフェース​

KeyboardStyleOptions​

プロパティタイプ説明デフォルトバージョン
styleKeyboardStyleキーボードのスタイル。KeyboardStyle.Default1.0.0

KeyboardResizeOptions​

プロパティタイプ説明バージョン
modeKeyboardResizeキーボードが表示されたときに要素のサイズを変更するために使用されるモード。1.0.0

PluginListenerHandle​

プロパティタイプ
remove() => Promise<void>

KeyboardInfo​

プロパティタイプ説明バージョン
keyboardHeightnumberキーボードの高さ。1.0.0

列挙型​

KeyboardStyle​

メンバー値説明バージョン
ダーク'DARK'ダークキーボード。1.0.0
ライト'LIGHT'ライトキーボード。1.0.0
デフォルト'DEFAULT'iOS 13 以降では、キーボードのスタイルはデバイスの外観に基づいています。デバイスがダークモードを使用している場合、キーボードはダークになります。デバイスがライトモードを使用している場合、キーボードはライトになります。iOS 12 では、キーボードはライトになります。1.0.0

KeyboardResize​

メンバー値説明バージョン
Body'body'body HTML 要素のみサイズ変更されます。ビューポートは変更されないため、相対単位は影響を受けません。1.0.0
Ionic'ionic'ion-app HTML 要素のみサイズ変更されます。Ionic Framework アプリのみに使用してください。1.0.0
Native'native'キーボードの表示/非表示時に、ネイティブ Web ビュー全体がサイズ変更されます。これは、vh 相対単位に影響します。1.0.0
None'none'アプリも Web ビューもサイズ変更されません。1.0.0

目次

このページを編集