Keyboard

EOL Notice

Keyboard will reach its end-of-life on July 1, 2024, and will no longer receive updates or support. Please see Support Policy for additional information.

The Keyboard plugin allows you to configure the keyboard behavior (show/hide) and display (sizing/visibility).

Installation

If you have not already setup Ionic Enterprise in your app, follow the one-time setup steps.

Next, install the plugin:

Capacitor
Cordova

Available as a core Capacitor plugin.

ionic cordova plugin add @ionic-enterprise/keyboard

Preferences

You can add the following preferences in your config.xml:

iOS Only Preferences

KeyboardResize (boolean, defaults to true). If true Showing/hiding the keyboard will trigger some kind of resizing of the app (see KeyboardResizeMode). If false Web will not be resized when the keyboard shows up.
```
 <preference name="KeyboardResize" value="true" />
```
KeyboardResizeMode (String, 'native' by default). Possible values:
- 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. Only for ionic apps.
```
  <preference name="KeyboardResizeMode" value="native" />
```
KeyboardStyle (String, 'light' by default). Possible values:
- light
- dark
```
  <preference name="KeyboardStyle" value="dark" />
```
HideKeyboardFormAccessoryBar (boolean, defaults to true). If set to true it hides the keyboard accessory bar. If set to false it shows the keyboard accessory bar.
```
 <preference name="HideKeyboardFormAccessoryBar" value="false" />
```

Android Only Preferences

resizeOnFullScreen (boolean, defaults to false). There is an Android bug that prevents the keyboard from resizing the WebView when the app is in full screen (i.e. if StatusBar plugin is used to hide the StatusBar). This setting, if set to true, add a workaround that resizes the WebView even when the app is in full screen.
```
 <preference name="resizeOnFullScreen" value="true" />
```

Index

Classes

Keyboard

Enumerations

KeyboardResizeMode

KeyboardResizeMode:

Body

Body: = "body"

Ionic

Ionic: = "ionic"

Native

Native: = "native"

None

None: = "none"

KeyboardStyle

KeyboardStyle:

Dark

Dark: = "dark"

Light

Light: = "light"

Classes

Keyboard

Keyboard:

name: Keyboard

description: Keyboard plugin for Cordova.

usage:

import { Keyboard } from '@ionic-enterprise/keyboard/ngx';

constructor(private keyboard: Keyboard) { }

...

this.keyboard.show();

this.keyboard.hide();

isVisible

● isVisible: boolean

Check keyboard status visible or not.

returns:

disableScroll

▸ disableScroll(disable: boolean): void

Programatically enable or disable the WebView scroll

Parameters:

Name	Type
disable	`boolean`

Returns: void

hide

▸ hide(): void

Hide the keyboard if shown.

Returns: void

hideFormAccessoryBar

▸ hideFormAccessoryBar(hide: boolean): void

Hide the keyboard accessory bar with the next, previous and done buttons.

Parameters:

Name	Type	Description
hide	`boolean`

Returns: void

onKeyboardDidHide

▸ onKeyboardDidHide(): Observable<any>

Creates an observable that notifies you when the keyboard did hide. Unsubscribe to observable to cancel event watch.