CODEWITHSUNDEEP
ioscordovaionic-framework
Taylorsuk
Taylorsuk

Reputation: 1449

Adding keyboard hide button in accessory bar in Ionic

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.

iOS keyboard accessory bar

Upvotes: 7

Views: 4760

Answers (1)

Eugene J. Lee
Eugene J. Lee

Reputation: 580

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>

Upvotes: 2

Related Questions