domingo, 23 de junho de 2013

Criar mascara para qualquer campo númerico(Telefone, CEP, CPF).

Com essa função podemos ter somente um método para criar máscara, tanto para telefone, cep, cpf entre outros. Ao testar o script observe que se usúario digitar letras serão apagadas automaticamente.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/estiloback.css" />

<title>Teste Mascara</title>

<script language='Javascript'>

function criaMascara(_RefObjeto, _Modelo){

var valorAtual = _RefObjeto.value;
var valorNumerico = '';
var nIndexModelo = 0;
var nIndexString = 0;
var valorFinal = '';
var adicionarValor = true;

// limpa a string valor atual para verificar
// se todos os caracteres são números
for (i=0;i<_Modelo.length;i++){
if (_Modelo.substr(i,1) != '#'){
valorAtual = valorAtual.replace(_Modelo.substr(i,1),'');
}}

// verifica se todos os caracteres são números
for (i=0;i<valorAtual.length;i++){
if (!isNaN(parseFloat(valorAtual.substr(i,1)))){
valorNumerico = valorNumerico + valorAtual.substr(i,1);
}}

// aplica a máscara ao campo informado usando
// o modelo de máscara informado no script
for (i=0;i<_Modelo.length;i++){

if (_Modelo.substr(i,1) == '#'){
if (valorNumerico.substr(nIndexModelo,1) != ''){
valorFinal = valorFinal + valorNumerico.substr(nIndexModelo,1);
nIndexModelo++;nIndexString++;
}
else {
adicionarValor = false;
}}

else {
if (adicionarValor && valorNumerico.substr(nIndexModelo,1) != ''){
valorFinal = valorFinal + _Modelo.substr(nIndexString,1);
nIndexString++;
}}
}

//alert(valorFinal)
_RefObjeto.value = valorFinal;

}



</script>
</head>
<body>



<input id="numero" name="numero" title="Número" type="text" maxlength="11" style="width:118px;background-color:#B8CCE4;" value="" onKeyUp="criaMascara(this,'###########')" />

<input id="telefone" name="telefone" title="Telefone" type="text" maxlength="14" style="width:118px;background-color:#B8CCE4;" value="" onKeyUp="criaMascara(this,'(##)####-####');" />
<input id="cpf" name="cpf" title="CPF" type="text" maxlength="14" style="width:118px;background-color:#B8CCE4;" value="" onKeyUp="criaMascara(this, '###.###.###.##');" />

</body>
</html>

Nenhum comentário:

Postar um comentário