cordova-plugin-aplexa-keyboard

Aplexa Keyboard Plugin

Usage no npm install needed!

<script type="module">
  import cordovaPluginAplexaKeyboard from 'https://cdn.skypack.dev/cordova-plugin-aplexa-keyboard';
</script>

README

cordova-plugin-aplexa-keyboard

This is a fork of cordova-plugin-ionic-keyboard with the puropse of avoiding conflict with https://w3c.github.io/keyboard-lock/

This plugin has been designed to work seamlessly with cordova-plugin-ionic-webview, so make sure you have it installed first:

Installation

cordova plugin add cordova-plugin-aplexa-keyboard --save

Preferences

KeyboardResize

Boolean (true by default)

Possible values

  • true: Showing/hiding the keyboard will trigger some kind of resizing of the app (see KeyboardResizeMode)
  • 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" />

Methods

Keyboard.hideFormAccessoryBar

Hide the keyboard toolbar.

Set to true to hide the additional toolbar that is on top of the keyboard. This toolbar features the Prev, Next, and Done buttons.

cordova.plugins.Keyboard.hideFormAccessoryBar(value, successCallback);
Quick Example
cordova.plugins.Keyboard.hideFormAccessoryBar(true);
cordova.plugins.Keyboard.hideFormAccessoryBar(false);
cordova.plugins.Keyboard.hideFormAccessoryBar(null, (currentValue) => { console.log(currentValue); });

Keyboard.hide

Hide the keyboard

Call this method to hide the keyboard

cordova.plugins.Keyboard.hide();

Keyboard.show

Show the keyboard

Call this method to show the keyboard.

cordova.plugins.Keyboard.show();

Keyboard.setResizeMode (for iOS only)



Programmatically set the resize mode



Call the method with parameter to set the resize mode.



// Possible values are the same as for 'KeyboardResizeMode' preference

cordova.plugins.Keyboard.setResizeMode('native');

cordova.plugins.Keyboard.setResizeMode('body');

cordova.plugins.Keyboard.setResizeMode('ionic');


Properties

Keyboard.isVisible

Determine if the keyboard is visible.

Read this property to determine if the keyboard is visible.

if (cordova.plugins.Keyboard.isVisible) {
    // do something
}

Events

keyboardDidHide

This event is fired when the keyboard is fully closed.

Attach handler to this event to be able to receive notification when keyboard is closed.

window.addEventListener('keyboardDidHide', () => {
    // Describe your logic which will be run each time keyboard is closed.
});

keyboardDidShow

This event is fired when the keyboard is fully open.

Attach handler to this event to be able to receive notification when keyboard is opened.

window.addEventListener('keyboardDidShow', (event) => {
    // Describe your logic which will be run each time when keyboard is about to be shown.
    console.log(event.keyboardHeight);
});

keyboardWillShow

This event fires before keyboard will be shown.

Attach handler to this event to be able to receive notification when keyboard is about to be shown on the screen.

window.addEventListener('keyboardWillShow', (event) => {
    // Describe your logic which will be run each time when keyboard is about to be shown.
    console.log(event.keyboardHeight);
});

keyboardWillHide

This event fires before keyboard will be closed.

Attach handler to this event to be able to receive notification when keyboard is about to be closed.

window.addEventListener('keyboardWillHide', () => {
    // Describe your logic which will be run each time when keyboard is about to be closed.
});