Saltar al contenido

Ionic Keyboard | Con ejemplos claros y sencillos

Keyboard Ionic

En el capítulo de hoy vamos a hablar un poquito más en profundidad sobre un componente que tiene dos puntos de vista. O lo quieres, o lo odias, lo que está claro es que es necesario en nuestros desarrollos. Tiene que estar presente en el 100 por 100 de las aplicaciones sin excepción alguna si queremos ofrecer una buena experiencia de usuario. Se trata de Ionic Keyboard.

Eyyyyy que pasa majo lector / guapa lectora. Hoy me siento con muchas ganas de continuar con el curso. Es algo que cada vez me cuesta menos ponerme y es por ti. ¿Por mí? Sí, por ti y por todas las personas que nos siguen ya. Te digo esto porque ya he empezado a notar, sobre todo en redes, que el curso se va conociendo y que es cada vez más la gente que se une a tomar estas clases. ¿Y sabes? Me encanta, y como he dicho antes, cada vez más.

Si eres nuevo por aquí, déjame que te diga que te pases por este enlace. Se trata del círculo y es una comunidad que estoy montando alrededor de este mundillo que es la programación, y más concretamente en Ionic. En el enlace está todo explicado.

Vale, fuera de presentaciones y publicidad gorrinera, comencemos que lo que nos interesa, como usar Ionic Keyboard.

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 @ionic-native/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 '@ionic-native/keyboard';

...

@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 '@ionic-native/keyboard';
//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 ‘@ionic-native/keyboard’;

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 🙂

 

 

Lamentablemente no he encontrado aún ningún vídeo que explique como podemos usar Ionic Keyboard. Así que tendré que hacerlo yo directamente. De momento no puedo, pero en cuanto lo tenga lo haré en un sencillo tutorial en el que verémos como tratar con él para los más vaguetes.

Pues de momento no queda mucho más que contar. Simplemente queda despedirse y, que, por si no lo sabías, es la parte que menos me gusta porque nunca sé que decir, decir que nos vemos en el siguiente capítulo del curso.

P.D. Estoy preparando una cosa chulísima que hará las delicias de muchos de los que nos dedicamos a esto. Aún no puedo revelar nada, pero te puedo asegurar que será increíble. Si quieres estar un poco más informado pásate por este enlace, es el círculo, seguro que no te arrepientes.

Un saludo.