Skip to main content

Keyboard

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)