Mascaras com JavaScript

10 respostas
C

Pessoal bom dia.
Crie essa function para adicionar automaticamente a barra num campo de Data:

<html><head>
		<title>Formata Datas</title>
		<script language="JavaScript">
		function formataData(obj) {
			if(obj.value.length == 2 || obj.value.length == 5){
				obj.value = obj.value + '/';
			}
		}
	</script>
	</head>
	<body>
		<form action="#">
			<table border="0">
				<tr><td>Data Nascimento</td>
					<td><input type="text" id="txtDataNasc" maxlength="10" onkeyup="formataData(this)"></td>
				</tr>
			</table>
		</form>
	</body>	
</html>
.

O problema é que se o usuario errar a data digitada e tentar apagar atrves do tecla 'backspace'; na hora que chega nos local onde esta sendo inserido automaticamente as barras, ele não consegui apagar. Alguem aí tem uma sugestão de como solucionar isso?

10 Respostas

V

tenta muda o evento de chamada do método.

C

Mas pra qual tipo de chamada vc indica? é que sou novato nessa area…

V

ai depende do tipo da formatação que você quer, se quer sair formatando a cada tecla que o usuario digita tu usa “onkeypress” provavelmente o que você usou:
da uma estudada:
http://www.geocities.com/SiliconValley/Way/3105/

provavelmente você tera que desconsiderar algumas teclas na formatação, para que a função não tente formatar um Backspace por exemplo.

V

Amigo, vou te ajudar e vc me ajuda OK ? hehehehe

No Meu JSP eu faço o seguinte (porem hj ví que não funciona no FireFox) Ai entra vc para me ajudar a solucionar.
No IE funciona que é uma beleza :

function mascara(campo,tipo){
      if(event.keyCode<48 || event.keyCode>57){
        event.returnValue=false;}
      if(campo.value.length==2 || campo.value.length==5){
      	if (tipo == 'tempo') {
      		campo.value+=":";
      	} else{
        	campo.value+="/";
        }
      }
	}
<input name="dtNascSoc" type="text" size="9" maxlength="10" onkeypress="mascara(this,'data')">

:lol:

Vimieiro

A

Bom, seu exemplo funciona no IE porque ele possui um objeto chamado event. Para funcionar no firefox você deve fazer assim:

function mascara(event,campo,tipo){ if(event.keyCode<48 || event.keyCode>57){ event.returnValue=false;} if(campo.value.length==2 || campo.value.length==5){ if (tipo == 'tempo') { campo.value+=":"; } else{ campo.value+="/"; } } }

Se você precisar, eu fiz alguns javascripts de máscara que funcionam assim:

V

Amigo ataxexe Quase !!! hehehe

é o seguinte : como você pode ver, esta função realiza duas operações
1ª somente numeros
2ª coloca / (data) ou : (hora) - faz mascara de data e tempo

Realmente agora a mascara funcionou porém ele ainda está aceitando letras quando entro com FF

um colega do forum me falou para colocar isso :

var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;

na função porem não estou conseguindo fazer !!!

Muito obrigado mesmo

vimieiro

A

Eu aconselho você a usar o Prototype para fazer essas verificações de input, ele tem um objeto Event que tem muitas funções úteis pra isso.

Aí vai uma função que eu uso pra pegar o keycode (na verdade são duas):

getKeyCode = function(e) { var code; e = getEvent(e); if (e.keyCode) { code = e.keyCode; } else if (e.which) { code = e.which; } return code; } getEvent = function(e) { return e ? e : window.event; }

Para você usar, faça assim:

function mascara(event,campo,tipo){ var keycode = getKeyCode(event); if(keycode < 48 || keycode > 57){ event.returnValue=false;} if(campo.value.length==2 || campo.value.length==5){ if (tipo == 'tempo') { campo.value+=":"; } else{ campo.value+="/"; } } }

D

Eu nem passava perto de outro que não fosse o jQuery, que além de já possuir isso, é super simples sua utilização e extremamente pequeno de tamanho (nem vou comparar).
Olha o link:

http://jquerybrasil.com/campo_de_formulario_com_mascara_jquery/

Se quiser conhecer o jQuery:

http://i18n.2kminterativa.com.br/jquery/jquery-getting-started-pt_br.html

Acho que isso você acaba com seus problemas.

Bons códigos

V

Valeu Ataxexe !!!

Amigo Djemacao, eu tb utilizo o JQuery (basico do básico) heheh aqui
inclusive utilizo mascara de CEP !!!

Agora a mascara do Jquery NÃO funciona em campos que vc não precisa preencher todo o campo ! Ele obrigatoriamente te leva a preencher tudo senão ele apaga o campo todo !
Vamos supor mascara de telefone (–) ---- ----
O usuario não sabe o DDD do telefone !!! Ferrou, pois ele não te deixa ficar ficar 1 posicao sem preenchimento !

Por um acaso tem uma solução para isso ? Se tiver vai ser uma mão na roda mesmo !!!

Vimieiro

C

Boas!

Encontrei uma função para formatação de data nesse endereço:

[url]http://www.htmlstaff.org/ver.php?id=18520[/url]

Fiz algumas modificações colocando alguns limites para minimizar as possíveis entradas inválidas do usuário, mantendo é claro, a validação no envio dos dados do formulário.
Algumas das alterações:
* Se o primeiro valor digitado for maior que 3, a saída resultante é, por exemplo: 04/
* Se o primeiro valor digitado for 3 e o segundo for maior que 1, a saída resultante é, por exemplo: 03/02/
* Se o usuário digita um valor para a dezena do mês e este for maior que 1, a saída resultante é, por exemplo: 05/02/
* Se o primeiro digito do ano for maior que 2, a saída resultante é, por exemplo: 31/11/2

Pra quem estiver interessado:

<html>
	<head>
		<title>formatado data em javascript</title>
		<script type="text/javascript">
			function Formatadata(Campo, teclapres)
                        {
                             var  tecla = teclapres.keyCode;
                             var vr = new String(Campo.value);
                             vr = vr.replace("/", "");
                             vr = vr.replace("/", "");
                             vr = vr.replace("/", "");
                             tam = vr.length + 1;

                             if (tecla != 8 && tecla != 8)
                             {       
                                 if (tam > 0 && tam < 2)
                                 {                    
                                     Campo.value = vr.substr(0, 2) ;
                                 }                
                                 if(tam == 2)
                                 {
                                     if(vr > 3)
                                         Campo.value = '0' + vr.substr(0, 1) + '/';
                                 }
                                 if (tam > 2 && tam < 4)
                                 {
                                     if(tam == 3 && (vr.substr(0, 1) >= 3))
                                     {
                                         if(vr.substr(1, 1) > 1)
                                             Campo.value = '0' + vr.substr(0, 1) + '/' + '0' + vr.substr(1, 1) + '/';
                                         else
                                             Campo.value = vr.substr(0, 2) + '/';
                                     }
                                     else
                                         Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2);
                                 }
                                 if(tam == 4)
                                 {
                                     if(vr.substr(2, 1) > 1)
                                         Campo.value = vr.substr(0, 2) + '/' + '0' + vr.substr(2,1) + '/';
                                 }               
                                 if (tam > 4 && tam < 7)
                                 {
                                     if(tam == 6 && (vr.substr(4, 1) > 2))
                                     {
                                         Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + '2';
                                     }
                                     else if(tam == 5 && ((vr.substr(3, 1) > 2) && (vr.substr(2, 1) == 1)))
                                         Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 1);
                                     else
                                         Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + vr.substr(4, 4);  
                                 }                
                                 if(tam > 9)
                                     Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + vr.substr(4, 4);    
                             }
                        }
		</script>
	</head>
	<body>
		<form method="post" action="arquivo.php">
			<p>
				<label>Data:</data>
				<input type="text" name="data" maxlength="10" onkeyup="Formatadata(this,event)" />
			</p>
		</form>
	</body>
</html>

Espero que seja útil, agradeço qualquer sugestão ou crítica....
Obrigado, até mais!

Criado 3 de abril de 2008
Ultima resposta 2 de jun. de 2008
Respostas 10
Participantes 6