Código Javascript para Máscaras (Atualizado)

Pois bem, tive que atualizar o código Javascript de máscaras para levar em conta a diferenciação de letras e números, sendo possível definir uma máscara como, por exemplo, LLL###-LL## (onde ‘L’ indica Letras e ‘#’ indica dígitos).

Segue o código atualizado:


// [dFilter] - A Numerical Input Mask for JavaScript
// Written By Dwayne Forehand - March 27th, 2003
// Please reuse & redistribute while keeping this notice.

var dFilterStep

function dFilterStrip (dFilterTemp, dFilterMask){

    dFilterMask = replace(dFilterMask,’#',”);
    dFilterMask = replace(dFilterMask,’L',”);

    for (dFilterStep = 0; dFilterStep < dFilterMask.length++; dFilterStep++){
        dFilterTemp = replace(dFilterTemp,dFilterMask.substring(dFilterStep,dFilterStep+1),”);
    }
    return dFilterTemp;
}

function dFilterMax (dFilterMask){

    dFilterTemp = dFilterMask;

    for (dFilterStep = 0; dFilterStep < (dFilterMask.length+1); dFilterStep++){
        if ((dFilterMask.charAt(dFilterStep)!=’#') && (dFilterMask.charAt(dFilterStep)!=’L')){
            dFilterTemp = replace(dFilterTemp,dFilterMask.charAt(dFilterStep),”);
        }
    }
    return dFilterTemp.length;
}

function dFilter (e, textbox, dFilterMask)
{
    /*
    * KEYS
    *
    * 9 - TAB
    * 8 - BACKSPACE
    *
    */

    var key;
    var strippedMask;

    if(window.event) // IE
    {
        key = window.event.keyCode;
    }
    else if(e.which) // Netscape/Firefox/Opera
    {
        key = e.which;
    }

    dFilterNum = dFilterStrip(textbox.value, dFilterMask);
    strippedMask = dFilterStrip(dFilterMask, dFilterMask);

    if (key!=9 && key!=8 && key!=13){

        if( strippedMask.charAt(dFilterNum.length) == ‘#’){
            if(!( ( key>47&&key<58 ) || ( key>95&&key<106 ) )){
                alert(’Digitar um Número!’);
                key = ‘*’;
            }
        }

        else if(strippedMask.charAt(dFilterNum.length) == ‘L’){
            if(!(key>64 && key<91)){
                alert(’Digitar uma Letra!’);
                key = ‘*’;
            }
        }
    }

    if (key==9){
        return true;
    }
    else if (key==8 && dFilterNum.length!=0){
        dFilterNum = dFilterNum.substring(0,dFilterNum.length-1);
    }
    else if((key>64&&key<91) && dFilterNum.length<dFilterMax(dFilterMask) ){
        dFilterNum=dFilterNum+String.fromCharCode(key);
    }
    else if ( ((key>47&&key<58)||(key>95&&key<106)) && dFilterNum.length<dFilterMax(dFilterMask) ){

        if( key>47&&key<58 ){
            dFilterNum=dFilterNum+String.fromCharCode(key);
        }

        if( key>95&&key<106 ){

            var aux = 0;
            switch(key){
                case 96:
                aux = 48;
                break;
                case 97:
                aux = 49;
                break;
                case 98:
                aux = 50;
                break;
                case 99:
                aux = 51;
                break;
                case 100:
                aux = 52;
                break;
                case 101:
                aux = 53;
                break;
                case 102:
                aux = 54;
                break;
                case 103:
                aux = 55;
                break;
                case 104:
                aux = 56;
                break;
                case 105:
                aux = 57;
                break;
            }

            dFilterNum=dFilterNum+String.fromCharCode(aux);
        }
    }

    var dFilterFinal=”;

    for (dFilterStep = 0; dFilterStep < dFilterMask.length; dFilterStep++)
    {
        if (dFilterMask.charAt(dFilterStep)==’#’ || dFilterMask.charAt(dFilterStep)==’L')
        {
            if (dFilterNum.length!=0)
            {
                dFilterFinal = dFilterFinal + dFilterNum.charAt(0);
                dFilterNum = dFilterNum.substring(1,dFilterNum.length);
            }
            else
            {
                dFilterFinal = dFilterFinal + “”;
            }
        }
        else
        {
            dFilterFinal = dFilterFinal + dFilterMask.charAt(dFilterStep);
        }
        // dFilterTemp = replace(dFilterTemp,dFilterMask.substring(dFilterStep,dFilterStep+1),”);
    }

    textbox.value = dFilterFinal;
    return false;
}

function replace(fullString,text,by) {

    // Replaces text with by in string
    var strLength = fullString.length, txtLength = text.length;

    if ((strLength == 0) || (txtLength == 0))
        return fullString;

    var i = fullString.indexOf(text);

    if ((!i) && (text != fullString.substring(0,txtLength)))
        return fullString;

    if (i == -1)
        return fullString;

    var newstr = fullString.substring(0,i) + by;

    if (i+txtLength < strLength)
        newstr += replace(fullString.substring(i+txtLength,strLength),text,by);

    return newstr;
}

&#91;/sourcecode&#93;

E eis uma página de exemplo:

&#91;sourcecode language="html"&#93;

<HTML>

<HEAD>

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<script type='text/javascript' src='dFilter.js'></script>
</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<form name="fred" action="fred.htm" method="post">
<table>
<tr>
<td>SSN:</td>
<td><input value="" type="text" onKeyDown="javascript:return dFilter (event, this, 'LLL##-####/##');" style="font-family:verdana;font-size:10pt;width:110px;"></td>
</tr>
<tr>
<td>Phone:</td>
<td><input value="" type="text" onKeyDown="javascript:return dFilter (event, this, '(LLL) ###-####');" style="font-family:verdana;font-size:10pt;width:110px;"></td>
</tr>
<tr>
<td>Zip:</td>
<td><input value="" type="text" onKeyDown="javascript:return dFilter (event, this, 'LLLLL-####');" style="font-family:verdana;font-size:10pt;width:110px;"></td>
</tr>
<td>Data:</td>
<td><input value="" type="text" onKeyDown="javascript:return dFilter (event, this, '###,##');" style="font-family:verdana;font-size:10pt;width:110px;"></td>
</tr>
</table>
</form>

<center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center>
</BODY>

</HTML>

É isto! 8)

Um comentário sobre “Código Javascript para Máscaras (Atualizado)

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s