@capacitor/keyboard
Advanced tools
The Keyboard API provides keyboard display and visibility control, along with event tracking when the keyboard shows and hides.
@capacitor/keyboard is a Capacitor plugin that provides keyboard-related functionalities for mobile applications. It allows developers to manage the keyboard's behavior, such as showing or hiding the keyboard, listening to keyboard events, and adjusting the viewport when the keyboard is displayed.
Show Keyboard
This feature allows you to programmatically show the keyboard.
import { Keyboard } from '@capacitor/keyboard';
Keyboard.show();Hide Keyboard
This feature allows you to programmatically hide the keyboard.
import { Keyboard } from '@capacitor/keyboard';
Keyboard.hide();Listen to Keyboard Events
This feature allows you to listen to keyboard events such as when the keyboard is about to show or hide.
import { Keyboard } from '@capacitor/keyboard';
Keyboard.addListener('keyboardWillShow', info => {
console.log('Keyboard will show with height:', info.keyboardHeight);
});
Keyboard.addListener('keyboardWillHide', () => {
console.log('Keyboard will hide');
});Set Accessory Bar Visibility
This feature allows you to set the visibility of the accessory bar above the keyboard.
import { Keyboard } from '@capacitor/keyboard';
Keyboard.setAccessoryBarVisible({ isVisible: true });Set Resize Mode
This feature allows you to set the resize mode of the web view when the keyboard is displayed. Modes include 'native', 'ionic', and 'body'.
import { Keyboard } from '@capacitor/keyboard';
Keyboard.setResizeMode({ mode: 'native' });cordova-plugin-keyboard is a Cordova plugin that provides similar functionalities for managing the keyboard in mobile applications. It allows you to show/hide the keyboard, listen to keyboard events, and adjust the viewport. However, it is designed for Cordova-based projects, whereas @capacitor/keyboard is designed for Capacitor-based projects.
react-native-keyboard-aware-scroll-view is a React Native package that helps manage the keyboard in React Native applications. It provides functionalities to automatically adjust the scroll view when the keyboard is displayed. While it offers similar functionalities, it is specifically designed for React Native, unlike @capacitor/keyboard which is for Capacitor.
ionic-plugin-keyboard is an Ionic plugin that provides keyboard management functionalities similar to @capacitor/keyboard. It allows you to show/hide the keyboard, listen to keyboard events, and adjust the viewport. It is designed for Ionic projects using Cordova, whereas @capacitor/keyboard is for Ionic projects using Capacitor.
The Keyboard API provides keyboard display and visibility control, along with event tracking when the keyboard shows and hides.
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');
});
On iOS, the keyboard can be configured with the following options:
resize: Configures the way the app is resized when the keyboard appears. Allowed values are:
none: Neither the app nor the Web View are resizednative: (default) The whole native Web View will be resized when the keyboard shows/hides. This affects the vh relative unit.body: Only the <body> HTML element will be resized. Relative units are not affected, because the viewport does not change.ionic: Only the <ion-app> HTML element will be resized. Use it only for Ionic Framework apps.style: If set to dark it will use dark style keyboard instead of the regular one.{
"pluginsConfig": {
"Keyboard": {
"resize": "body",
"style": "dark"
}
}
}
cordova-plugin-ionic-keyboardTo maintain compatibility with
cordova-plugin-ionic-keyboard,
the following events also work with window.addEventListener:
keyboardWillShowkeyboardDidShowkeyboardWillHidekeyboardDidHideshow()hide()setAccessoryBarVisible(...)setScroll(...)setStyle(...)setResizeMode(...)addListener('keyboardWillShow', ...)addListener('keyboardDidShow', ...)addListener('keyboardWillHide', ...)addListener('keyboardDidHide', ...)removeAllListeners()show() => Promise<void>
Show the keyboard. This method is alpha and may have issues.
This method is only supported on Android.
Since: 1.0.0
hide() => Promise<void>
Hide the keyboard.
Since: 1.0.0
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.
| Param | Type |
|---|---|
options | { isVisible: boolean; } |
Since: 1.0.0
setScroll(options: { isDisabled: boolean; }) => Promise<void>
Programmatically enable or disable the WebView scroll.
This method is only supported on iOS.
| Param | Type |
|---|---|
options | { isDisabled: boolean; } |
Since: 1.0.0
setStyle(options: KeyboardStyleOptions) => Promise<void>
Programmatically set the keyboard style.
This method is only supported on iOS.
| Param | Type |
|---|---|
options | KeyboardStyleOptions |
Since: 1.0.0
setResizeMode(options: KeyboardResizeOptions) => Promise<void>
Programmatically set the resize mode.
This method is only supported on iOS.
| Param | Type |
|---|---|
options | KeyboardResizeOptions |
Since: 1.0.0
addListener(eventName: 'keyboardWillShow', listenerFunc: (info: KeyboardInfo) => void) => PluginListenerHandle
Listen for when the keyboard is about to be shown.
| Param | Type |
|---|---|
eventName | 'keyboardWillShow' |
listenerFunc | (info: KeyboardInfo) => void |
Returns: PluginListenerHandle
Since: 1.0.0
addListener(eventName: 'keyboardDidShow', listenerFunc: (info: KeyboardInfo) => void) => PluginListenerHandle
Listen for when the keyboard is shown.
| Param | Type |
|---|---|
eventName | 'keyboardDidShow' |
listenerFunc | (info: KeyboardInfo) => void |
Returns: PluginListenerHandle
Since: 1.0.0
addListener(eventName: 'keyboardWillHide', listenerFunc: () => void) => PluginListenerHandle
Listen for when the keyboard is about to be hidden.
| Param | Type |
|---|---|
eventName | 'keyboardWillHide' |
listenerFunc | () => void |
Returns: PluginListenerHandle
Since: 1.0.0
addListener(eventName: 'keyboardDidHide', listenerFunc: () => void) => PluginListenerHandle
Listen for when the keyboard is hidden.
| Param | Type |
|---|---|
eventName | 'keyboardDidHide' |
listenerFunc | () => void |
Returns: PluginListenerHandle
Since: 1.0.0
removeAllListeners() => void
Remove all native listeners for this plugin.
Since: 1.0.0
| Prop | Type | Description | Since |
|---|---|---|---|
style | KeyboardStyle | Style of the keyboard. | 1.0.0 |
| Prop | Type | Description | Since |
|---|---|---|---|
mode | KeyboardResize | Mode used to resize elements when the keyboard appears. | 1.0.0 |
| Prop | Type |
|---|---|
remove | () => void |
| Prop | Type | Description | Since |
|---|---|---|---|
keyboardHeight | number | Height of the heyboard. | 1.0.0 |
| Members | Value | Description | Since |
|---|---|---|---|
Dark | 'DARK' | Dark keyboard. | 1.0.0 |
Light | 'LIGHT' | Light keyboard. | 1.0.0 |
| Members | Value | Description | Since |
|---|---|---|---|
Body | 'body' | Resizes the html body. | 1.0.0 |
Ionic | 'ionic' | Resizes Ionic app | 1.0.0 |
Native | 'native' | Resizes the WebView. | 1.0.0 |
None | 'none' | Don't resize anything. | 1.0.0 |
FAQs
The Keyboard API provides keyboard display and visibility control, along with event tracking when the keyboard shows and hides.
The npm package @capacitor/keyboard receives a total of 71,676 weekly downloads. As such, @capacitor/keyboard popularity was classified as popular.
We found that @capacitor/keyboard demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.