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

05 jan, 2012
By wiliamluis
2 Comments
0
Dicas, JQuery, Plugins

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 :

 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>

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

<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>

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

<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>

E o campo fica assim


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

Fonte: digitalbush

Até a próxima. =)