Log da Selva

Ja faz um tempinho que estou ligado nos padrões web. Procuro sempre aprender uma coisa ou outra e estar sempre nos conformes. Como ainda sou aprendiz, dou umas mancadas (e levo bronca do Luã xD) mas normalmente conserto depois.

Além das dicas que o Luã me da, tenho alguns sites que sempre me ajudam nos momentos mais difíceis. Um brushzinho aqui, uma fontezinha ali, um framework acolá… E de uns dias pra ca, tem um blog que ta sendo uma baita duma mão na roda.

Este é um post de utilidade pública… e digo utilidade porque eu nunca vi um site tão útil pra alguem que trabalha com web quanto o blog do Tyasske. Ele segue à risca os Padrões Web e ainda ajuda o pessoal com um bocado de dicas sobre tudo relacionado a webdevelopment.
Eu assinei o feed e procuro comentar nos posts mais úteis. Recomendo.

Outro dia, tivemos que apresentar um trabalho sobre Web 2.0. Papo vai, papo vem, até que o Allan Tito (que posta nesse blog, inclusive, o post anterior é dele) fala sobre Ajax. Eu ja conhecia a base desse conceito, tanto que eu que sugeri o assunto a ele, mas aquela apresentação chamou a minha atenção.

Decidi, então, pesquisar tutoriais de ajax. Minha primeira impressão foi: "Watahell is this?!". Confesso que não entendo nada entendo muito pouco de JavaScript e aqueles códigos me deixaram confuso. Logo, pensei como todo preguiçoso programador pensa: "Pra que fazer isso se ja existe algo pronto e livre?". Tornei a procurar por algo que pudesse fazer o trabalho pesado por mim e, gracias!, acabei achando o BackBase. O Backbase é um "add-on pra html". Ele cria uma linguagem XML que faz todo o trabalho por você e, o melhor, tem uma versão gratuita. O código é tão fácil que dá gosto de fazer sites com Ajax.

Clicando aqui vocês podem ter um exemplo do que essa maravilha é capaz.

Bom, recomendação dada. Até mais.

Esses dias estava trabalhando em um projeto que teve como exigência um formulário com máscaras pra CNPJ, CPF e telefone, fora outro com máscara pra datas, então criei uma função genérica pra máscaras, depois de muito pesquisar e reaproveitar partes de outros códigos.

Tipos e padrões:
CPF: XXX.XXX.XXX-XX
CNPJ: XX.XXX.XXX/XXXX-XX
TEL: (XX) XXXX-XXXX
DATA: DD/MM/YYYY

Sintaxe:
Máscara(tipo, campo, teclaPressionada);

Função:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

function Mascara(tipo, campo, teclaPress) {
	if (window.event)
	{
		var tecla = teclaPress.keyCode;
	} else {
		tecla = teclaPress.which;
	}
 
	var s = new String(campo.value);
	// Remove todos os caracteres à seguir: ( ) / - . e espaço, para tratar a string denovo.
	s = s.replace(/(\.|\(|\)|\/|\-| )+/g,'');
 
	tam = s.length + 1;
 
	if ( tecla != 9 && tecla != 8 ) {
		switch (tipo)
		{
		case 'CPF' :
			if (tam > 3 && tam < 7)
				campo.value = s.substr(0,3) + '.' + s.substr(3, tam);
			if (tam >= 7 && tam < 10)
				campo.value = s.substr(0,3) + '.' + s.substr(3,3) + '.' + s.substr(6,tam-6);
			if (tam >= 10 && tam < 12)
				campo.value = s.substr(0,3) + '.' + s.substr(3,3) + '.' + s.substr(6,3) + '-' + s.substr(9,tam-9);
		break;
 
		case 'CNPJ' :
 
			if (tam > 2 && tam < 6)
				campo.value = s.substr(0,2) + '.' + s.substr(2, tam);
			if (tam >= 6 && tam < 9)
				campo.value = s.substr(0,2) + '.' + s.substr(2,3) + '.' + s.substr(5,tam-5);
			if (tam >= 9 && tam < 13)
				campo.value = s.substr(0,2) + '.' + s.substr(2,3) + '.' + s.substr(5,3) + '/' + s.substr(8,tam-8);
			if (tam >= 13 && tam < 15)
				campo.value = s.substr(0,2) + '.' + s.substr(2,3) + '.' + s.substr(5,3) + '/' + s.substr(8,4)+ '-' + s.substr(12,tam-12);
		break;
 
		case 'TEL' :
			if (tam > 2 && tam < 4)
				campo.value = '(' + s.substr(0,2) + ') ' + s.substr(2,tam);
			if (tam >= 7 && tam < 11)
				campo.value = '(' + s.substr(0,2) + ') ' + s.substr(2,4) + '-' + s.substr(6,tam-6);
		break;
 
		case 'DATA' :
			if (tam > 2 && tam < 4)
				campo.value = s.substr(0,2) + '/' + s.substr(2, tam);
			if (tam > 4 && tam < 11)
				campo.value = s.substr(0,2) + '/' + s.substr(2,2) + '/' + s.substr(4,tam-4);
		break;
		}
	}
}

Exemplo de uso:

1

<input name="cpf" type="text" maxlength="14" onKeyPress="Mascara('CPF',this,event);">

Testada no MSIE6 e no Firefox 2.0.4.

Espero que seja útil (: