28 de julho de 2008

Mascaras com Prototype

Pessoal, como estou caçando mais JavaScript e convertendo para usar no sistema, continuando o post anterior vou colocar mais máscaras comuns.
Peguei de exemplo um post do GUJ com as máscaras mais comuns e adaptei para utilizar com o prototype do mesmo modo do post anterior (Máscaras com JQuery), passando apenas event.

//Máscara para CEP

function AjustaCep(event){
var input = event.element();
//Ajusta máscara de CEP e só permite digitação de números
if (input.value.length == 5){
input.value += "-";
if(event.keyCode == 0){
input.value += "-";
}
}

return mascaraInteiro(input.value);
}


function MascaraTelefone(event){
var tel = event.element();
if(mascaraInteiro(tel.value)==false){
event.returnValue = false;
}
return formataCampo(tel, '(00) 0000-0000', event);
}


//formatar as máscaras
function formataCampo(campo, Mascara, evento) {
var boleanoMascara;

var Digitato = evento.keyCode;
exp = /\-|\.|\/|\(|\)| /g
campoSoNumeros = campo.value.toString().replace( exp, "" );

var posicaoCampo = 0;
var NovoValorCampo="";
var TamanhoMascara = campoSoNumeros.length;;

if (Digitato != 8) { // backspace
for(i=0; i<= TamanhoMascara; i++) { boleanoMascara = ((Mascara.charAt(i) == "-") || (Mascara.charAt(i) == ".") || (Mascara.charAt(i) == "/")) boleanoMascara = boleanoMascara || ((Mascara.charAt(i) == "(") || (Mascara.charAt(i) == ")") || (Mascara.charAt(i) == " ")) if (boleanoMascara) { NovoValorCampo += Mascara.charAt(i); TamanhoMascara++; }else { NovoValorCampo += campoSoNumeros.charAt(posicaoCampo); posicaoCampo++; } } campo.value = NovoValorCampo; return true; }else { return true; } } //Verifica se o que está sendo digitado é um inteiro function mascaraInteiro(){ if (event.keyCode <> 57){
event.returnValue = false;
return false;
}
return true;
}


Daí é só usar:
<.script type="text/javascript" src="include/script/ajax/prototype.js"><./script>
<.script type="text/javascript" src="include/script/ajax/scriptaculous.js?load=effects,controls"><./script>
<.script type="text/javascript" src="include/script/mascaras.js"><./script>

<.script type="text/javascript" src="include/script/ajax/prototype.js"><./script>
<.script type="text/javascript" src="include/script/ajax/scriptaculous.js?load=effects,controls"><./script>
<.script type="text/javascript" src="include/script/mascaras.js"><./script>

<.script type="text/javascript">
$("txtCEP").observe("keypress", AjustaCep);<.br /> $("txtTelefone").observe("keypress", MascaraTelefone);
<./script>

Nenhum comentário: