Cargando...
Feedback

Mejora en el Masked Input Plugin de jQuery

 

Seguro que muchos de ya conocéis este genial plugin (Masked Input Plugin de Josh Bush) para facilitar la entrada de datos en formularios asignándoles una máscara que facilite la introducción de datos estructurados.

El plugin funciona realmente bien, pero creemos que tenía una carencia muy importante para algunos tipos de datos, en concreto para introducir fechas. La eterna duda sobre qué valor hay poner delante, si el mes o el día, en función del idioma y del lugar en que te encuentres. Para solucionarlo hemos modificado ligeramente el plugin para que acepte un "placeholder" de más de un carácter y que será el que se muestre durante la edición del input mientras no se haya completado.

Con esta modificación el único cambio sobre el plugin es que acepta valores de más de un caracter en su parámetro de configuración "placeholder":

    $("#date").mask("99/99/9999", {placeholder: 'dd/mm/yyyy'});

Aquí podéis ver un ejemplo de uso completo.

Plugin original: http://digitalbush.com/projects/masked-input-plugin/

Plugin modificado (src): jquery.maskedinput-1.2.2-co.js

Plugin modificado (min): jquery.maskedinput-1.2.2-co.min.js

10 comentarios

Genial su modificación, pero hay una que se le escapó y que es otra carencia que este gran plugin tiene que es con el ingreso de direcciones de e-mail.
Ricardo Avalos 10.12.2010 | 15:43
Gracias!!

No creo que para los mails sea tan sencillo, ya que los mails no tienen unas longitudes conocidas a priori, de forma que intentar aplicar la misma idea para un e-mail supondría modificar sustancialmente la forma en la que funciona el plugin.

¿Te animas a intentarlo tú Ricardo?
ramiro 10.12.2010 | 15:54
Ramiro,

Me devuelves una pelota que primero te había tirado a ti!!

Esto si que es chasco para mi!! jajajajajajajaja
Ricardo Avalos 10.12.2010 | 16:06
Definitely an improvement, considering all of the different date notation formats used all around the world (http://en.wikipedia.org/wiki/Date_notation_by_country)
UnUsability 16.05.2011 | 22:44
Saludos

Visitando su web vi los comentarios acerca de las máscaras

Yo estoy tratando de crear dos que se vean de la siguiente forma:


Sector: _______, Calle: _____________, Número: ______, Letra:

Piso: ___, Número: ________, Letra:


Los valores ingresados en sector, calle letra quedaran completamente en letras mayúsculas, para lo cual estoy utilizando las siguientes máscaras


("\Sector: \>*************<\, Calle: \>*************<\, Número: \999999\, Letra: \>??<")

("\Piso: \999\, Número: \99999999\, Letra: \>??<")

Pero el resultado que obtengo es el siguiente:


Sector: >_____________<, C_lle: >_____________<, Número: ______, Letr_: ><
Piso: ___, Número: ________, Letr_: ><



Me pudieran ayudar por favor???

No sé que estoy haciendo mal


Mil gracias

jose hernandez 22.08.2012 | 16:32
Que tal amigo excelente tu plugin modificado, solo me queda una duda como puedo aplicar esto a un textbox? ya que intenté hacerlo referenciando el id del textbox pero no me funciona no muestra la mascara
Ramón Esparza Ramos 04.10.2012 | 17:31
Hola Ramón.

http://jsfiddle.net/ramiro_conductiva/VKxRV/

En la dirección anterior puedes ver un ejemplo funcionando.

La máscara solo sale cuando el elemento recibe el foco.
ramiro 04.10.2012 | 17:44
Excellent addition to input mask.
Ch Simhachalam 24.12.2012 | 16:10
Thank you very much ! your example was clear, exact, and work perfect !

Before u, I red more comments, but when I tried 'em in my app, didn't work.

Yours was clear.
Best regards
Oana 11.03.2013 | 12:56
He tratado de usar en un mismo campo fecha, Masked input plugin y Datepicker, insertando este como función opcional del plugin, pero en ese caso dejan de trabajar las dos funciones. No tengo disponible la máscara y tampoco el datepicker. ¿alguna idea?
Jorge H 29.07.2013 | 21:34

Se han cerrado los comentarios para este post
 
© 2021  • condiciones generales