Plugin de Máscara de formulários para JQuery – Masked Input

Se trata de um plugin bem simples e pequeno (2.8kb) de jquery pra fazer máscaras nos inputs de um formulário, como cpf, cnpj, telefone, cep, etc…

Pra usar é bem simples, faça download dos arquivos :

JQuery 1.2.6, versão pack e
Masked Input-1.1.4, versão pack

e chame-os dentro do HEAD da sua página :

[sourcecode language=”html”] título do site …<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script><script src="js/jquery.maskedinput-1.1.4.pack.js" type="text/javascript"></script>[/sourcecode]

Para aplicar a máscara, as regras são simples:

a – Representa qualquer letra (A-Z,a-z)
9 – Representa qualquer número (0-9)
* – Representa qualquer caractére alfanumérico (A-Z,a-z,0-9)

Veja os exemplos

[sourcecode language=”javascript”]<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$("#telefone").mask("9999-9999");
$("#cpf").mask("999.999.999-99");
$("#cep").mask("99999-999");
$("#data").mask("99/99/9999");
});
// ]]></script>[/sourcecode]

Veja um exemplo de um campo ajustável, onde pode ser usado como CPF ou como CNPJ no mesmo campo.

[sourcecode language=”javascript”]<script type="text/javascript">// <![CDATA[
function str_replace(busca,subs,valor){
var ret=valor;
var pos=ret.indexOf(busca);
while(pos!=-1){
ret=ret.substring(0,pos)+subs+ret.substring(pos+busca.length,ret.length);
pos=ret.indexOf(busca);
}
return ret;
}

function mascara(valor,masc){
var res=valor,mas=str_replace("?","",str_replace("9","",masc));
for(var i=0;i<mas.length;i++){
res=str_replace(mas.charAt(i),"",res);
mas=str_replace(mas.charAt(i),"",mas);
}
var ret="";
for(var i=0;i<masc.length&&res!="";i++){ switch(masc.charAt(i)){ case"?": ret+=res.charAt(0); res=res.substring(1,res.length); break; case"9": while(res!=""&&(res.charCodeAt(0)>57||res.charCodeAt(0)<48))res=res.substring(1,res.length);
if(res!=""){
ret+=res.charAt(0);
res=res.substring(1,res.length);
}
break;
default:
ret+=masc.charAt(i);
}
}
return ret;
}

$(document).ready(function(){

$("#cpf_cnpj").keyup(function(){

if($(this).val().length <= 14)
$(this).val( mascara($(this).val(), ‘999.999.999-99’) );
else
$(this).val( mascara($(this).val(), ‘999.999.999/9999-99’) );

})

});
// ]]></script>[/sourcecode]

E o campo fica assim

[sourcecode language=”html”]

<input id="cpf_cnpj" name="cpf_cnpj" type="text" />

[/sourcecode]

Fonte: digitalbush

Até a próxima. =)