← Plugins / Keyboard
Maintained by the Ionic team, this plugin gives you fine control over the on-screen keyboard: events that tell you when it shows or hides (and how tall it is), methods to dismiss it, and preferences that decide how your layout resizes around it.
iOS
Androidcordova plugin add cordova-plugin-ionic-keyboardAdd these listeners on window after deviceready:
| Event | Fires when |
|---|---|
keyboardWillShow | Just before the keyboard appears; event.keyboardHeight gives its height. |
keyboardDidShow | After the keyboard is fully shown. |
keyboardWillHide | Just before the keyboard is dismissed. |
keyboardDidHide | After the keyboard has been dismissed. |
| Member | Description |
|---|---|
Keyboard.hide() | Dismiss the keyboard programmatically. |
Keyboard.show() | Show the keyboard (Android only). |
Keyboard.isVisible | Boolean — whether the keyboard is currently shown. |
Keyboard.setResizeMode(mode) | How the web view resizes: native, body, ionic or none. |
You can also set KeyboardResize, KeyboardResizeMode and KeyboardStyle as preferences in config.xml.
Shift a floating button up while the keyboard is open:
window.addEventListener("keyboardWillShow", function (e) {
document.body.style.setProperty("--kb", e.keyboardHeight + "px");
});
window.addEventListener("keyboardWillHide", function () {
document.body.style.setProperty("--kb", "0px");
});
function dismiss() {
Keyboard.hide();
}event.keyboardHeight in keyboardWillShow to animate content out of the way smoothly.Keyboard.hide() when a form is submitted to get the keyboard out of the way.