Since ionic-plugin-keyboard doesn't provide keyboardDidShow and keyboardDidHide events for android, and cordova-plugin-keyboard doesn't support KeyboardShrinksView preference for ios, I combined these two plugins and make this new plugin.
This plugin provides the
Keyboardobject which has some functions to customize and control the keyboard. It also supports the HideKeyboardFormAccessoryBar (boolean) and KeyboardShrinksView (boolean) preferences for ios in config.xml.
This plugin was based on this Apache project and has a compatible API.
- Installation
- Methods
- Keyboard.shrinkView
- Keyboard.hideFormAccessoryBar
- Keyboard.disableScrollingInShrinkView
- Keyboard.hide
- Keyboard.show
- Properties
- Keyboard.isVisible
- Keyboard.automaticScrollToTopOnHiding
- Events
- keyboardDidShow
- keyboardDidHide
- keyboardWillShow
- keyboardWillHide
- keyboardHeightWillChange
- Releases
From github latest (may not be stable)
cordova plugin add https://github.com/lovelyelfpop/cordova-plugin-keyboard
Shrink the WebView when the keyboard comes up.
Keyboard.shrinkView(true);
Set to true to shrink the WebView when the keyboard comes up. The WebView shrinks instead of the viewport shrinking and the page scrollable. This applies to apps that position their elements relative to the bottom of the WebView. This is the default behaviour on Android, and makes a lot of sense when building apps as opposed to webpages.
- iOS
Keyboard.shrinkView(true);
Keyboard.shrinkView(false);
Hide the keyboard toolbar.
Keyboard.hideFormAccessoryBar(true);
Set to true to hide the additional toolbar that is on top of the keyboard. This toolbar features the Prev, Next, and Done buttons.
- iOS
Keyboard.hideFormAccessoryBar(true);
Keyboard.hideFormAccessoryBar(false);
Disable scrolling when the the WebView is shrunk.
Keyboard.disableScrollingInShrinkView(true);
Set to true to disable scrolling when the WebView is shrunk.
- iOS
Keyboard.disableScrollingInShrinkView(true);
Keyboard.disableScrollingInShrinkView(false);
Hide the keyboard
Keyboard.hide();
Call this method to hide the keyboard
- iOS
- Android
Keyboard.hide();
Show the keyboard
Keyboard.show();
Call this method to show the keyboard.
This method only support android.
For ios, if you want the keyboard to appear when calling focus() on form inputs, you should set KeyboardDisplayRequiresUserAction to false on config.xml.
- Android
Keyboard.show();
Determine if the keyboard is visible.
if (Keyboard.isVisible) {
// do something
}
Read this property to determine if the keyboard is visible.
- iOS
- Android
Specifies whenether content of page would be automatically scrolled to the top of the page when keyboard is hiding.
Keyboard.automaticScrollToTopOnHiding = true;
Set this to true if you need that page scroll to beginning when keyboard is hiding. This is allows to fix issue with elements declared with position: fixed, after keyboard is hiding.
- iOS
This event is fired when keyboard fully shown.
//for ios
window.addEventListener('keyboardDidShow', function () {
// Describe your logic which will be run each time keyboard is shown.
});
//for android
window.addEventListener('keyboardDidShow', function (event) {
// Describe your logic which will be run each time keyboard is shown.
console.log(event.keyboardHeight);
});
Attach handler to this event to be able to receive notification when keyboard is shown.
- iOS
- Android
This event is fired when the keyboard is fully closed.
window.addEventListener('keyboardDidHide', function () {
// Describe your logic which will be run each time keyboard is closed.
});
Attach handler to this event to be able to receive notification when keyboard is closed.
- iOS
- Android
This event fires before keyboard will be shown.
window.addEventListener('keyboardWillShow', function () {
// Describe your logic which will be run each time when keyboard is about to be shown.
});
Attach handler to this event to be able to receive notification when keyboard is about to be shown on the screen.
- iOS
This event is fired when the keyboard is fully closed.
window.addEventListener('keyboardWillHide', function () {
// Describe your logic which will be run each time when keyboard is about to be closed.
});
Attach handler to this event to be able to receive notification when keyboard is about to be closed.
- iOS
This event is fired when the keyboard is fully closed.
window.addEventListener('keyboardHeightWillChange', function (event) {
// Describe your logic which will be run each time when keyboard is about to be closed.
console.log(event.keyboardHeight);
});
Attach handler to this event to be able to receive notification when keyboard is about to be closed.
- iOS