capacitor keyboard user action code example

Example: keyboard capacitor

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