Skip to main content

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:

Available as a core Capacitor plugin.

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

Enumerations

Classes


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:

NameType
disableboolean

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:

NameTypeDescription
hideboolean

Returns: void


onKeyboardDidHide

onKeyboardDidHide(): Observable<any>

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

Returns: Observable<any>


onKeyboardDidShow

onKeyboardDidShow(): Observable<any>

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

Returns: Observable<any>


onKeyboardHide

onKeyboardHide(): Observable<any>

Creates an observable that notifies you when the keyboard is hidden. Unsubscribe to observable to cancel event watch.

Returns: Observable<any>


onKeyboardShow

onKeyboardShow(): Observable<any>

Creates an observable that notifies you when the keyboard is shown. Unsubscribe to observable to cancel event watch.

Returns: Observable<any>


onKeyboardWillHide

onKeyboardWillHide(): Observable<any>

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

Returns: Observable<any>


onKeyboardWillShow

onKeyboardWillShow(): Observable<any>

Creates an observable that notifies you when the keyboard will show. Unsubscribe to observable to cancel event watch.

Returns: Observable<any>


setKeyboardStyle

setKeyboardStyle(style: KeyboardStyle): void

Programatically set Keyboard style

Parameters:

NameType
styleKeyboardStyle

Returns: void


setResizeMode

setResizeMode(mode: KeyboardResizeMode): void

Programatically set the resize mode

Parameters:

NameTypeDescription
modeKeyboardResizeMode

Returns: void


show

show(): void

Force keyboard to be shown.

Returns: void



Changelog

2.2.0 (2019-09-03)

Features

  • windows: add windows implementation
  • android: add resizeOnFullScreen preference for Android (#106) (169c73c)
  • ios: Added Keyboard.setKeyboardStyle method (#79) (4c03a7e)
  • ios: reimplement disableScroll method (#102) (b33e7a2)

Bug Fixes

  • android: Avoid conflicts when ionic-plugin-keyboard is installed (#104) (893dc8e)
  • ios: respect KeyboardAppearanceDark preference from webview plugin (#101) (b00e3a9)
  • ios: Delay resize until keyboard animation finish (#81) (d729cbf)
  • ios: Avoid duplicate hide event when user changes field (#68) (4a0e018)