Ionic Keyboard | Con ejemplos claros y sencillos

¿Necesitas recoger información del usuario, la lógica del teclado natural no te gusta y has pensado en Ionic Keyboard? O, quizás, ya sabes cómo se hace pero te falta algún detallito más para implementar cómo te gustaría ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde el año 2014, y en este artículo vas a aprender a mostrar, ocultar y escuchar el teclado del sistema con Ionic Keyboard de una manera sencilla y práctica.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Y ahora si, comenzamos. Let´s go!

Ionic Keyboard, ¿Por qué?

Vale, esta es una respuesta que muchos se hacen a la hora de intentar solucionar problemas de teclado y básicamente, Ionic no trae de manera nativa un sistema de comunicación directa con el teclado. El que se encarga de levantarlo o bajarlo es el sistema operativo.

Si hacemos uso de este plugin tendremos acceso a los eventos, abrirlo, cerrarlo, etc… desde nuestro código. Y, como he dicho antes, en el 100% de las aplicaciones es necesario para mejorar la respuesta que le podemos dar al usuario.

Un ejemplo sería: Entrar en una nueva pestaña y que directamente se le haga foco a input sin nuestro consentimiento y se levante el teclado. El usuario, para poder continuar, tendrá que bajarlo para seguir trabajando. Esto es algo que nos ahorramos con este sistema.

Instalación de Ionic Keyboard

Para poder hacer uso de él, y como he comentado antes que no está incluido en el core, tendremos que realizar las siguientes dos sentencias en nuestra consola:

$ ionic cordova plugin add cordova-plugin-ionic-keyboard
$ npm install --save @awesome-cordova-plugins/keyboard

Y después de esperar un rato a que se instale todo, ya podemos continuar con el siguiente paso. Impórtalo a nuestro proyecto de la siguiente manera:

import { Keyboard } from '@awesome-cordova-plugins/keyboard/ngx';

...

@NgModule({
  ...

  providers: [
    ...
    Keyboard
    ...
  ]
  ...
})
export class AppModule { }

Bien, pues con todo ya instalado y a punto pasamos al siguiente punto.

Configuración del componente

Yuhuuuu! Este componente no necesita configurarse. Basta con los pasos de instalación que hemos realizado en la parte de arriba así que vamos a la chicha, como podemos usarlo.

Como usar Ionic Keyboard

Cojonudo, ya estamos en la parte interesante. Para poder dar uso a este componente, y después de todo lo que hemos hecho antes, basta con que hagamos dos cosas.

• En primer lugar, tenemos que agregarlo a los import de nuestra clase.
• Y después, dentro de nuestro componente donde lo queramos usar tenemos que inyectarlo en el constructor como haríamos con cualquier otro.

Veamos el código de inyección antes de continuar:

import { Keyboard } from '@awesome-cordova-plugins/keyboard/ngx';
//Inyectamos el compoonente en el constructor.
constructor(private keyboard: Keyboard) { }

...

//Función que fuerza la apertura del teclado.
this.keyboard.show();

//Función que fuerza el cierre del teclado.
this.keyboard.hide();

¿Ves que sencillito? Genial, pues continuemos con la explicación.

Funciones y campos de Ionic Keyboard

Vamos a ver, y antes de explicar nada. En esta sección voy a explicar los métodos y campos base que tiene el componente. No me voy a extender a explicar hacia arriba en la herencia por que podríamos hacer 10 artículos más. Que los haré, eh! Pero de momento vamos a continuar con esto.

Funciones

Estas son las funciones básica del módulo Keyboard. Con ellas vamos a poder, entre otras cosillas, abrir y cerrar el teclado de manera programática.

• hideFromAccesoryBar (hide) -> hide = boolean -> Sirve para mostrar la barra que aparece encima del teclado con una fecha para adelante, otra para atrás y un botón de OK.
• show() -> Sirve para mostrar el teclado. Si entiendes un poco de inglés lo habrás podido imaginar.
• hide() -> Sirve para esconder el teclado.
• setResizeMode(mode) -> string -> Aquí podemos ajustar el tamaño del teclado de manera programática.

Listeners / oyentes

Estas son las funcione que se le pegan al componente Keyboard para poder tratar los eventos de entrada del usuario.

• onKeyboardShow() -> Es llamado cuando el teclado se ha mostrado. Devuelve un observable que podemos controlar para hacer nuestros respectivos cambios.
• onKeyboardWillShow() -> Es llamado antes de que se muestre el teclado. Devuelve un observable done nos engancharemos para obtener los datos.
• onKeyboardHiden() -> Es llamado cuando el teclado ha sido escondido. Devuelve un observable al que nos tenemos que enganchar para obtener los datos.
• onKeyboardWillHide() -> Es llamado antes de que el teclado sea escondido. Devuelve un observable al que nos tenemos que enganchar para obtener los datos.

Ionic Keyboard Disable Scroll y cómo habilitarlo

Avanzando con la sección, me gustaría hacer hincapié en un concepto que me han consultado bastante en los foros y por las redes sobre el teclado en Ionic. Y es la posibilidad de activar el Scroll cuando se muestra el teclado.

Es importante recordar que en la versión 4 de Ionic, esta función ha pasado a deshuso y ya no funciona así que tendremos que buscar otra alternativa en caso de que estemos haciendo uso de esta.

Veamos un ejemplo de código funcional antes de continuar:

import { Keyboard } from ‘@awesome-cordova-plugins/keyboard/ngx’;

constructor(public keyboard: Keyboard) {}

disableTheKeyboard() {
    this.keyboard.disableScroll(true); //Habilitada por defecto
}
enableTheKeyboard() {
    this.keyboard.disableScroll(false);
}

Bien, en primer lugar comentar que de manera predeterminada estará seteado en verdadero. Por esto el Scroll estará deshabilitado. La función en si incurren un poco en confusión pero bueno, es así.

"disableTheKeyboard" Deshabilitará el Scroll y "enableTheKeyboard" lo habilitará no tiene mucho más.

Ahora solo números / Only numbers

Si eres uno de mis usuarios que entiende algo de desarrollo web, esto sabrás de sobra cómo se realiza, pero para los que le falta un poquíto, cómo es tu caso si estás leyendo esto, la manera de hacer que Ionic Keyboard solo muestros números o, "Ionic keyboard only numbers", se realiza con la siguiente etiqueta HTML cuando creamos nuestro objeto:

<input type="number">

Sencillo ¿verdad? Pruebalo, verás que bien todo :)

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

Sin nada más que agregar me despido ya. Nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!