Ionic Tutorials

Ionic 5 Keyboard with Cordova and Ionic Native Tutorial

The keyboard helps users type whatever they want; in ionic apps, adding a keyboard is simple. Ionic offers a plethora of plugins to create features similar to native mobile apps easily.

In this tutorial, we will share how to manage the keyboard in ionic apps. You will understand how to install and configure Cordova and Ionic native keyboard plugins in Ionic apps.

This guide will make you familiar with the events of keyboard plugins that are significantly important. And tells you how to integrate the keyboard functionality in ionic.

How to Add Keyboard in Ionic 5 Application

  • Step 1: Set Up Ionic App
  • Step 2: Install Ionic Keyboard Packages
  • Step 3: Register Keyboard Plugin in App Module
  • Step 4: Manage Keyboard in TypeScript

Set Up Ionic App

In order to start, you must have an Ionic application installed on your system.

However, if you haven’t downloaded it yet, execute the suggested command to create the new ionic app.

ionic start IonicCosmos blank --type=angular

Go inside the project folder.

cd IonicCosmos

Install Ionic Keyboard Packages

Here are the commands that you need to invoke from the terminal window.

These commands will install the required ionic keyboard packages in the Ionic app.

ionic cordova plugin add cordova-plugin-ionic-keyboard

npm install @ionic-native/keyboard

Register Keyboard Plugin in App Module

In the next step, you will be importing the Keyboard module in the app module class.

Hence, head over to the app.module.ts file, and add the given code within the file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

// Register module
import { Keyboard } from '@ionic-native/keyboard/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    {
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy,
    },
    Keyboard
  ],
  bootstrap: [AppComponent],
})

export class AppModule {}

First, import the Keyboard module from the ‘@ionic-native/keyboard/ngx’ package; secondly add the Keyboard module in the providers’ array.

Embed Keyboard in Ionic

In order to handle keyboard, you have define the given code in the home.page.ts file.

import { Component } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard/ngx';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})


export class HomePage {
  constructor(private keyboard: Keyboard) {

    window.addEventListener('keyboardDidShow', () => {
      
    });

    window.addEventListener('keyboardWillShow', () => {
      
    });    

    window.addEventListener('keyboardWillHide', () => {
      
    });

    window.addEventListener('keyboardDidHide', () => {
      
    });
  }

  showIonKeyboard() {
    this.keyboard.show();
  }

  hideIonKeyboard() {
    this.keyboard.hide();
  }
}

To manage the keyboard in Ionic, you may use the following events.

This event is triggered when the keyboard is fully open.

window.addEventListener('keyboardDidShow', () => {
  
});

This event is called before keyboard will be shown.

window.addEventListener('keyboardWillShow', () => {
      
});

This event is evoked before keyboard will be closed.

window.addEventListener('keyboardWillHide', () => {
      
});

This event is fired when the keyboard is fully closed.

window.addEventListener('keyboardDidHide', () => {
      
});

Conclusion

Here in this quick guide, we eventually found a simple way to control the keyboard’s behavior. We have revealed how to deal with keyboard features in the ionic platform.

Digamber

I am Digamber, a full-stack developer and fitness enthusiast. I crafted this site to bestow my coding experience and love to write on JavaScript, React, Angular, Vue, Laravel.

Recent Posts

React Display Validation Error Messages with Hook Form Tutorial

As a React developer, you must know how to implement validation in form, and a…

2 days ago

React Hook Form 7 Required Checkbox Validation Tutorial

Creating checkboxes in React is not so difficult, especially when you are using React Hook…

5 days ago

React Hook Form 7 Custom Radio Buttons Tutorial

Learning React is not complicated; instead, it's easy, but only when you have the right…

1 week ago

React Bootstrap Custom Dropdown List with Fetch API Tutorial

Dropdown is a valuable and prominent module, which is often used to select one option…

2 weeks ago

React Hook Form Reset / Clear Form Values and Errors Tutorial

React form reset tutorial; Forms are handy provides the best possible way to get information…

2 weeks ago

React Show Loading Spinner on Submit Click Tutorial

You click on the submit button, form is processed, but nothing is being shown to…

2 weeks ago