Mudar a cor de fundo de um campo de formulário


Autor/fonte: Hebertphp
E-mail/Url: http://www.hebertphp.net/wordpress/?p=587
Tags: [ formulários ] [ onfocus ] [ onblur ]



Digg del.icio.us

Uma forma bem simples de alterar a cor de fundo de um campo de formulário é criar uma função bem simples que deve ser adicionada entre as tags <HEAD> e </HEAD> na página HTML.

<script>
function mudacor(ref,cor){
	ref.style.backgroundColor=cor;
}
</script>

O uso é bem simples, quando for criar um campo de formulário tipo texto, por exemplo, vamos utilizar em conjunto com a criação dos campos os eventos ONFOCUS e ONBLUR.

Caso você não conheça os eventos fica a sugestão da leitura:

Os manipuladores de eventos em Javascript

Abaixo um exemplo de utilização para um campo tipo texto:completo com formulário:

<input type="text" name="teste" id="teste" onfocus="mudacor(this,'yellow')" onblur="mudacor(this,'white')">

A utilização do this, está fazendo referência ao próprio campo de formulário, também podendo ser substituído por: document.getElementById('teste').

Quando clicamos no campo dispara o evento onfocus para alterar o estilo do campo de formulário mudando a sua cor de fundo. Ao clicar fora do campo dispara o evento onblur mudando novamente a cor de fundo.

Espero ter ajudado pois além do efeito ficar bem interessante, hoje está sendo utilizado em diversos formulários espalhados pela internet.




Enviado por xKuRt em 29/12/2007 às 16:53


Itens relacionados

Cuidados na validação de formulários por Javascript
Rotinas de validação em Javascript
Clona/copia dados digitados em um campo exibe no outro
Formulário com dois botões com actions diferentes
Solução para limpar e resgatar o valor default do atributo value de um campo
Validando se campo de formulário esta foi preenchido ou não
Navegando nos campos do seu formulário usando as teclas Enter e Esc
Evento onBlur
Receber dados de formulário com Javascript
Contando os caracteres em campos de formulário

Listar todos itens relacionados

Avaliação

Esta publicação ainda não foi avaliada!


Avaliar:


A avaliação de publicações é restrita a membros cadastrados e logados no nosso site.



Comentários

Este artigo ainda não foi comentado ou o(s) comentário(s) que foi(ram) enviado(s) a ele ainda não foi(ram) publicado(s).


Envio de comentário:




  

Domingo, 26 de Abril de 2015




Top 5 membros

Últimos membros online

Últimos membros cadastrados



Capa do livro
Microsoft SQL Server 2012 Express: Guia Prático e Interativo


Capa do livro
Linux - Controles de Redes


Capa do livro
SCJA - Guia de Estudos para Certificação Sun Java Associado - Exame Cx-310-019





Hostnet

IMD