Utilidades JavaScript – Masked Textbox

Hace unos días que estaba con ganas de implementar un control Textbox, que soporte máscaras para facilitarle la vida a los queridos usuarios. Ya que, aunque parezca mentira, no conozco buenos controles de este tipo. El que probé fue el del AjaxControlToolKit, pero me encontré con varios bugs bastante desagradables.

Como ya se ha hecho una costumbre, antes de empezar a tirar la primera línea de código,hice una búsqueda en Google para ver si existía alguna implementación ya hecha y lo más importante que fuera libre, free, opensource, como debe ser!!!

Para mi sorpresa (si, a veces me sorprendo, soy humano), me encuentro con una excelente implementación de dicho control, enteramente en Javascript y que realmente es muy fácil de empezar a usar. Tiene como nombre iMask.  Si bien todavía está en desarrollo y hay bastantes mejoras que se le podrían hacer, es sumamente útil.

Los invito a probarla, además el mismo creador de iMask creó el fValidator que es una utilidad también implementada en Javascript para la validación de la entrada de datos, y es compatible con iMask.

Espero que le sirva a alguien, y si conocen alguna otra implementación por favor comenten y dejen algún link.

[iMask] [fValidator] [AjaxControlToolkit]

Anuncios

3 comments so far

  1. Ronald Avendaño on

    Encontré algo más práctico en la red lo modifiqué del original para que funcione óptimamente en Internet Explorer y Mozilla Firefox (adicionalmente va un par de funciones que alguien más hizo y se agradece por eso…el autor original lo publico en portugués):

    <—- Ronald Avendaño
    <—- ronald.avendano@gmail.com

    /***
    * Descrição.: formata um campo do formulário de
    * acordo com a máscara informada…
    * Parâmetros: – objForm (o Objeto Form)
    * – strField (string contendo o nome
    * do textbox)
    * – sMask (mascara que define o
    * formato que o dado será apresentado,
    * usando o algarismo “9” para
    * definir números e o símbolo “!” para
    * qualquer caracter…
    * – evtKeyPress (evento)
    * Uso…….:
    * Observação: As máscaras podem ser representadas como os exemplos abaixo:
    * CEP -> 99.999-999
    * CPF -> 999.999.999-99
    * CNPJ -> 99.999.999/9999-99
    * Data -> 99/99/9999
    * Tel Resid -> (99) 999-9999
    * Tel Cel -> (99) 9999-9999
    * Processo -> 99.999999999/999-99
    * C/C -> 999999-!
    * E por aí vai…
    ***/

    function txtBoxFormat(objForm, strField, sMask, evtKeyPress) {
    var i, nCount, sValue, fldLen, mskLen,bolMask, sCod, nTecla;

    var ua = window.navigator.userAgent
    var msie = ua.indexOf ( “MSIE ” )

    if ( msie > 0 ) { // Internet Explorer
    nTecla = evtKeyPress.keyCode; }
    else { // Nestcape
    nTecla = evtKeyPress.which;
    }

    sValue = objForm[strField].value;

    // Limpa todos os caracteres de formatação que
    // já estiverem no campo.
    sValue = sValue.toString().replace( “-“, “” );
    sValue = sValue.toString().replace( “-“, “” );
    sValue = sValue.toString().replace( “.”, “” );
    sValue = sValue.toString().replace( “.”, “” );
    sValue = sValue.toString().replace( “/”, “” );
    sValue = sValue.toString().replace( “/”, “” );
    sValue = sValue.toString().replace( “(“, “” );
    sValue = sValue.toString().replace( “(“, “” );
    sValue = sValue.toString().replace( “)”, “” );
    sValue = sValue.toString().replace( “)”, “” );
    sValue = sValue.toString().replace( ” “, “” );
    sValue = sValue.toString().replace( ” “, “” );
    fldLen = sValue.length;
    mskLen = sMask.length;

    i = 0;
    nCount = 0;
    sCod = “”;
    mskLen = fldLen;

    while (i 47) && (nTecla = len && !containsElement(filter,keyCode)) {
    input.value = input.value.slice(0, len);
    input.form[(getIndex(input)+1) % input.form.length].focus();
    }

    function containsElement(arr, ele) {
    var found = false, index = 0;
    while(!found && index < arr.length)
    if(arr[index] == ele)
    found = true;
    else
    index++;
    return found;
    }

    function getIndex(input) {
    var index = -1, i = 0, found = false;
    while (i < input.form.length && index == -1)
    if (input.form[i] == input)index = i;
    else i++;
    return index;
    }
    return true;
    }

  2. Ronald Avendaño on

    Ejemplo de uso:

  3. Ronald Avendaño on

    * Uso…….:


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: