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

Evento onFocus
Validando se campo de formulário esta foi preenchido ou não
Solução para limpar e resgatar o valor default do atributo value de um campo
Rotinas de validação em Javascript
Contando os caracteres em campos de formulário
Navegando nos campos do seu formulário usando as teclas Enter e Esc
Clona/copia dados digitados em um campo exibe no outro
Evento onBlur
Receber dados de formulário com Javascript
Função para validar um campo de um 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:




  

Segunda, 28 de Julho de 2014




Top 5 membros

Últimos membros online

  • 1em 28/07 às 09:46
  • xKuRtem 27/07 às 15:13
  • JCanecaem 26/07 às 19:02

Últimos membros cadastrados



Capa do livro
PHP para Quem Conhece PHP


Capa do livro
Arte de Escrever Programas Legíveis, A - Técnicas Simples e Práticas para Elaboração de Programas Fáceis de Serem Lidos e Entendidos


Capa do livro
Construindo Sites Adotando Padrões Web





Hostnet

IMD