.

112 Ionic1 Keyboard

Keyboard

On both Android and iOS, Ionic will attempt to prevent the keyboard from obscuring inputs and focusable elements when it appears by scrolling them into view. In order for this to work, any focusable elements must be within a Scroll View or a directive such as Content that has a Scroll View.

It will also attempt to prevent the native overflow scrolling on focus, which can cause layout issues such as pushing headers up and out of view.

The keyboard fixes work best in conjunction with the Ionic Keyboard Plugin, although it will perform reasonably well without. However, if you are using Cordova there is no reason not to use the plugin.

Hide when keyboard shows
To hide an element when the keyboard is open, add the class hide-on-keyboard-open.

<div class="hide-on-keyboard-open">  <div id="google-map"></div> </div>

Note: For performance reasons, elements will not be hidden for 400ms after the start of the native.keyboardshow event from the Ionic Keyboard plugin. If you would like them to disappear immediately, you could do something like:

window.addEventListener('native.keyboardshow', function(){    document.body.classList.add('keyboard-open');  });

This adds the same keyboard-open class that is normally added by Ionic 400ms after the keyboard opens. However, bear in mind that adding this class to the body immediately may cause jank in any animations on Android that occur when the keyboard opens (for example, scrolling any obscured inputs into view).

Plugin Usage
Information on using the plugin can be found at https://github.com/ionic-team/ionic-plugins-keyboard .

Reference

http://ionicframework.com/docs/v1/api/page/keyboard/ 

.