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.

formato de campos input con javascript

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 😀

Categorizado en: