Formato de campos input con JavaScript

Comúnmente cuando deseamos que determinada información contenga un formato exacto recurrimos a las expresiones regulares mediante el uso de patrones, esto que si bien es una practica aceptable, muchas veces termina por complicarnos la existencia. Para hacer nuestra vida un poco más sencilla es que existe Formatter.js.

Formatter.js es una pequeña biblioteca gratuita escrita con JavaScript, que funciona tanto de manera independiente como vinculada a frameworks como jQuery, nos permite lograr un formato de datos muy efectivo con apenas unas lineas de código.

La principal ventaja de este recurso es el de brindar un formato de datos sin recurrir a complicadas expresiones regulares, tan solo debemos definir el patrón a utilizar y la biblioteca hará el resto.

Un buen ejemplo de uso aparece cuando queremos que el usuario ingrese un numero telefónico con el patrón (000) 000.000. Con formatter.js simplemente escribimos:

new Formatter(document.getElementById('phone-input'), {
  'pattern': '({{999}}) {{999}}.{{9999}}',
  'persistent': true
});

Y el formato se aplicará directamente al campo input en cuestión.

El punto alto de este proyecto es que el formato se instaura directamente en el campo input del formulario, haciendo que el usuario ingrese obligatoriamente la información en el formato que nosotros mismos definimos.

Los patrones se definen de manera muy sencilla utilizando corchetes {{ }}, acepta números [0-9], letras [A-Za-z], o directamente podemos utilizar un * para aceptar cualquier tipo de carácter posible.

Formatter.js es un proyecto liberado bajo licencia MIT. No tiene demasiada ciencia pero eso no resta que sea muy útil 😀

Pablo: Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.
Entradas relacionadas