Keyboard
The Keyboard API provides keyboard display and visibility control, along with event tracking when the keyboard shows and hides.
- keyboardWillShow
- keyboardDidShow
- keyboardWillHide
- keyboardDidHide
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();
The keyboard plugin allows the following configuration values to be added in
capacitor.config.json for the iOS platform:
resize: It configures the way the app is resized when the Keyboard appears. Allowed values arenone: Not the app, nor the webview are resizednative: (default) The whole native webview will be resized when the keyboard shows/hides, it will affect thevhrelative 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 todarkit will use Dark style keyboard instead of the regular one.
{
"plugins": {
"Keyboard": {
"resize": "body",
"style": "dark"
}
}
}
