Form com jQuery: Implementando realce de campo selecionado

Por uma quest�o de usabilidade e est�tica, � uma boa pr�tica acrescentar algum tipo de feedback visual em formul�rios web para indicar o campo atualmente ativo (ou "focado"). Alguns navegadores (Safari / Opera) decidiram que � t�o importante, que eles pr�prios implementaram esse tipo de funcionalidade por padr�o aplicando uma borda azul em torno de elementos para marc�-los como ativos, tal como na Figura 1.

Figura 1: Exemplo de campo de texto padr�o e com destaque

O procedimento � simples, principalmente se voc� j� desenvolve web ou conhece conceitos de CSS e HTML. Para browsers que n�o sejam o Safari ou Opera, � poss�vel usar CSS para implementar o estilo de foco no campo, atrav�s da pseudo-class :focus, tal como pode ser visto na Listagem 1.

Listagem 1: Exemplo de uso do CSS focus em um campo HTML

input:focus {
      background: blue;   /* azul*/
}

Essa � uma �tima estrat�gia, mas infelizmente existem alguns pontos negativos:

N�o funciona em alguns browsers, a se dizer do Internet Explorer;
Isso funciona marcando apenas o campo em si, e desconsidera completamente a label e o espaço ao redor do mesmo.

O lado bom da situaç�o � que existem algumas alternativas mais elegantes, dentre elas fazendo uso de JavaScript ou de bibliotecas JavaScript como jQuery. Analise ent�o o c�digo da Listagem 2, onde consta o mesmo modelo de formul�rio, por�m com os campos de input e label dentro da div.

Listagem 2: Formul�rio exemplo com campos dentro da DIV

<form>
	<div class="campo-simples">
		<label for="Nome">Nome:</label>
		<input name="Nome" type="text"></input>
	</div>
	<div class=" campo-simples ">
		<label for="Email">Email:</label>
		<input name="Email" type="text"></input>
	</div>
</form>

A jQuery � uma biblioteca que trabalha com a leitura dos componentes HTML no DOM e implementaç�o dos eventos atrav�s dos m�todos dispon�veis na API da mesma. Atrav�s disso, � poss�vel identificar quando um campo de input de um formul�rio recebe o foco e implementar a regra CSS para que o campo seja marcado, consequentemente. A funç�o ready � usada para configurar alguma coisa quando a p�gina for inicializada (Listagem 3).

Listagem 3: Funç�o ready para mapear o evento de foco no campo de input

$(document).ready(function(){
	$("input").focus(function() {
		....fazer alguma coisa....
	});
});

Essa � a parte legal da jQuery: poder acessar o componente pai do input, a div, para modificar o estilo da mesma. Tudo isso � poss�vel por causa do mapeamento hier�rquico que a jQuery faz no Document Object. O objetivo � aplicar uma �nica classe a essa mesma div quando o cursor entrar no foco do campo em quest�o. Veja na Listagem 4.

Listagem 4: C�digo de adiç�o da classe de focoAtual

$(document).ready(function(){
	$("input").focus(function() {
		$(this).parent().addClass("focoAtual");
	});
});

E de tal forma, poder criar a classe CSS para o mesmo efeito (Listagem 5). Notar que a mesma deve ser criada dentro da tag style correspondente.

Listagem 5: Estilo CSS para foco do campo

div.focoAtual {
	background: #fdecb2;
}

O resultado pode ser visto na Figura 2.

Figura 2: Resultado do CSS no campo de input

Conforme voc� pode notar, o resultado saiu como planejado. Entretanto, existe um problema ao usar essa estrat�gia: ap�s a classe CSS ser aplicada ao campo, a mesma continuar� l� quando o mesmo campo perder o foco. Isso foge �s expectativas de funcionalidade quando leva-se em consideraç�o que o pr�ximo campo que receber o foco tamb�m ficar� marcado. Felizmente, a jQuery tamb�m encapsula o evento de blur que � o oposto do focus, ou seja, que � executado ap�s o campo perder o foco. Veja na Listagem 6, como o c�digo ficar�.

Listagem 6: Adiç�o do c�digo de remoç�o da classe CSS

$(document).ready(function(){
	$("input").focus(function() {
		$(this).parent().addClass("focoAtual")
	});
	$("input").blur(function() {
		$(this).parent().removeClass("focoAtual")
	});
});

N�o necessariamente � preciso especificar "focoAtual" na funç�o removeClass, pois se voc� deixar em branco ele ir� remover todas as classes, mas apenas no caso de se ter v�rias classes, pode deixar por isso mesmo.

Cada um dos quatro cantos � uma pequena div que necessita para ir para dentro de cada um dos divs wrapper de campo. Uma vez que todos eles s�o exatamente o mesmo e precisam estar dentro de cada div wrapper, vamos aplic�-las atrav�s da jQuery e evitar marcaç�o repetida e desnecess�ria.

� poss�vel fazer qualquer trecho de HTML em um objeto jQuery. Ent�o que tal usar a funç�o "appendTo" para coloc�-lo dentro de cada div? Confira na Listagem 7.

Listagem 7: Uso da funç�o appendTo

$('<div class="tl"></div><div class="tr"></div><div class="bl">
</div><div class="br"></div>').appendTo("div.campo-simples");

No CSS, estilize-o, mas deixe seus valores de exibiç�o para "none" para que eles n�o apareçam at� que seja preciso (Listagem 8).

Listagem 8: CSS para exibiç�o das bordas

.tl {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background: url(images/corner-topleft.jpg);
	display: none;
}
.tr {
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background: url(images/corner-topright.jpg);
	display: none;
}
.bl {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background: url(images/corner-bottomleft.jpg);
	display: none;
}
.br {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background: url(images/corner-bottomright.jpg);
	display: none;
}

Finalmente, implemente o c�digo da Listagem 9 para que o jQuery consiga varrer o conte�do do teu formul�rio e preencher com as respectivas cores de plano de fundo ao evento de foco.

Listagem 9: Codigo completo de adiç�o das bordas

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("input").focus(function() {
			$(this)
				.parent()
					.addClass("focoAtual")
				.children("div")
					.toggle();
		});
		$("input").blur(function() {
			$(this)
				.parent()
					.removeClass("focoAtual")
				.children("div")
					.toggle();
		});
		$('<div class="tl"></div><div class="tr"></div><div class="bl"></div>
<div class="br"></div>').appendTo("div.campo-simples");
	});
</script>

Agora sim temos o resultado final completo esperado.

Form com jQuery: Implementando realce de campo selecionado

Veja neste artigo como customizar formulários com jQuery, destacando visualmente os campos que estiverem selecionados (com foco).

Artigos relacionados