¿Quieres controlar los eventos del teclado en tu aplicación mediante 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?
Si has respodido que sí a alguna de estas dos preguntas, déjame decirte que no estás solo. Ni mucho menos.
Es más, hasta los que somo más experimentados en el desarrollo necesitamos de este tipo de artículo cuando tenemos que realizar alguna integración nueva de algún componente que llevamos tiempo sin usar, o es la primera vez que lo usamos.
Mi nombre es Aitor Sánchez y soy desarrollador de software desde el año 2014, y en este artículo te enseñaré cómo puedes implementar Ionic Keyboard en tu aplicación de una manera sencilla y práctica.
Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.
P.D: Darse de alta es gratis y de baja, también.
Consultar estructura del artículo
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 🙂
Más tutoriales de Ionic
Ion Select | todo lo que debes saber
Ion-radio (Ionic radio button) de 0 a 100
Ionic Slider con ejemplos claros y prácticos
Firebase en Ionic – ¿Qué es y cómo se utiliza? con Ejemplos / Examples
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.