Keyboard

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

Window Events for cordova-plugin-ionic-keyboard compatibility

  • keyboardWillShow
  • keyboardDidShow
  • keyboardWillHide
  • keyboardDidHide

Example

import { Plugins } 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)

Keyboard plugin allow this configurations for iOS

  • 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: 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

Contributors

BackNext