Cómo aplicar máscaras en textos con AlpineJS

Las máscaras son herramientas que podemos usar para formatear el contenido de un input en HTML (por ejemplo, cuando el usuario introduce un número de teléfono o una tarjeta de crédito).

Gracias a AlpineJS, usar máscaras en nuestros inputs es una tarea muy sencilla:

Mask plugin de AlpineJS

AlpineJS tiene un plugin para aplicar máscaras de textos a los inputs mientras escribimos. Para instalarlo:

npm install @alpinejs/mask

Luego, tenemos que incluirlo en nuestra página web:

import Alpine from 'alpinejs'
import mask from '@alpinejs/mask'
 
Alpine.plugin(mask)
 
// ...

Una vez instalado, ya podemos irnos a nuestro input y añadirle la máscara usando x-mask:

<input x-mask="99/99/9999" placeholder="MM/DD/YYYY">

Estos son los wildcards que se pueden usar en las máscaras: