Ionic 4 | Keyboard Native Plugin Tutorial

In a hybrid application which runs in a WebView, we sometimes face challenges to have control on Keyboard to show or hide when the user starts to type in. To resolve this ve have Cordova plugin which controls Keyboards events and provides easy methods to intentionally show or hide Keyboard on user screen.

Here we will discuss How to add Keyboard Native plugin in Ionic 4 application and how to sue Keyboards Hook events.

Let’s start!

Create a new Ionic 4 application

Run following NPM commands to create a new Ionic 4 application using a blank template.

Install Keyboard Plugins

Run following NPM commands to install Cordova plugin and it’s Native wrapper

Import Plugin in Module

To make plugin work throughout the application, open app.module.ts file to import Keyboard class then add in Providers array as shown below:

Add Keyboard Method and Events in Component

To use class methods and event handlers, import Keyboard class then add in the component’s constructor.

Show or Hide Keyboard

To manually show/ hide keyboard on a page call following methods:

Show Keyboard

Hide Keyboard

Check if Keyboard is visible

To check if Keyboard is opened or closed, we can use isVisible property of Keyboard class. This property returns boolean.

Events for Keyboard

The Kayboard class provides following event triggers which can be caught to bind manual logics.

keyboardWillShow, keyboardDidShow, keyboardWillHide and keyboardDidHide are the available events which we need to bind to windows object in Ionic component.

After adding above metho and events, our complete home.page.ts file will look like this:

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of