Shefarol Soluções Web

Métodos focus() e blur() - Voltar

O método focus() dá foco a um elemento (se puder ser focado).

O método blur() remove o foco de um elemento.

No formulário abaixo, assim que cada campo receber o foco "método focus()"" receberá uma cor de preenchimento e assim que o campo perder o foco "método blur()"" a cor de preenchimento será removida.

Isto ajuda muito quanto à acessibilidade.





 

Exemplo do HTML
<form name="form1" id="form1" method="post">
	<label for="nome">Nome</label><br> 
	<input type="text" name="nome" id="nome"
		   onfocus="Destaca(this)" 
		   onblur="Limpa(this)"><br>

	<label for="email">E-mail</label><br> 
	<input type="email" name="email" id="email"
		   onfocus="Destaca(this)" 
		   onblur="Limpa(this)"><br>

	<label for="fone">Fone</label><br> 
	<input type="text" name="fone" id="fone"
		   onfocus="Destaca(this)" 
		   onblur="Limpa(this)"><br>

	<label for="cep">CEP</label><br> 
	<input type="text" name="cep" id="cep"
		   onfocus="Destaca(this)" 
		   onblur="Limpa(this)"><br>
</form>

 

Observe que em cada campo input existe os métodos focus() e blur() que chamam as funções Destaca() e Limpa() consecutivamente.

Essas funções precisam de um parâmetro que será o identificador de quem receberá a formatação, neste caso o parâmetro é o próprio campo input "this".

 

Exemplo do Javascript
function Destaca(x){
	x.style.backgroundColor = '#FF8C00';
}

function Limpa(x){
	x.style.backgroundColor = '#FFFFFF';
}