tjwoon / csUIResizeOnKeyboard

Cordova plugin to prevent iOS keyboard from overlapping and offsetting the app's UI/viewport.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

csKeyboardUIResize Cordova Plugin

This plugin's purpose is to disable the iOS behaviour of pushing the app UI upwards and off-screen when the soft-keyboard is displayed. Instead, the app's main View is resized so that:

  1. the keyboard does not obscure any part of the app,
  2. no part of the app is pushed off-screen, and
  3. any UI elements which are designed to stick to the bottom of the app's UI remain visible and stuck to the bottom of the app UI, above the keyboard.

Status

Only works on iOS. Does nothing on Android, which seems to behave this way already (need to double check with HTC devices).

Usage

Run the following after the deviceready event fires.

cloudSky.UIResizeOnKeyboard.preventPan(
    function () {
        // Success callback.
        // Once here, the app's UI will not be resized upon displaying the soft
        // keyboard. WARNING: Does not resize the app if the keyboard was
        // already displayed when this function was called.
    },
    function () {
        // Failure callback.
        // Should not happen...
    }
)

You can disable the UI resize prevention like this:

cloudSky.UIResizeOnKeyboard.unpreventPan(
    function () {}, // Success callback.
    function () {}  // Failure callback.
)

Make sure your <body> element does not overflow the viewport.

About

Cordova plugin to prevent iOS keyboard from overlapping and offsetting the app's UI/viewport.


Languages

Language:Objective-C 59.6%Language:JavaScript 40.4%