Adding keyboard hide button in accessory bar in Ionic

Question

I am using the ionic framework to create my app and I use a lot of forms with modals. In order to move between fields a user normally taps on the space where there isn't any image however this can lead to unexpected behaviour.

I would like a button to hide the keyboard exactly like the image below.

Answer 1

If you are using cordova, you can first install this plugin

cordova plugin add com.ionic.keyboard

Then, in your callback, initiate

cordova.plugins.Keyboard.close();

Some information regarding attaching an element above the keyboard.

keyboard-attach is an attribute directive which will cause an element to float above the keyboard when the keyboard shows. Currently only supports the ion-footer-bar directive.

On iOS, if there is an input in your footer, you will need to set

cordova.plugins.Keyboard.disableScroll(true)

The Usage

<ion-footer-bar align-title="left" keyboard-attach class="bar-assertive">
    <h1 class="title">Title!</h1>
</ion-footer-bar>