[Resolvido] Alterar cor fundo da input quando clicada

[gRoOvE 0]

Gostaria de saber como faço para alterar a cor de fundo de uma input quando a mesma for clicada, pra dar um destaque nela. Qual seria a lógica?

[William Bruno 1501]

só fazer a linguagem javascript, manipular o css

 

elemento.style.backgroundColor = '#ff0000'; //coloque a cor em hexadecimal

 

hum.. como estamos falando de javascript, que é uma linguagem de interação com o cliente.. você precisa pensar em qual evento invocar.

 

no teu caso, um onfocus cai bem.

[Bruno Augusto 417]

Hmmmm.... E que tal usar JavaScript apenas como hack pro IEca (opcionalmente ainda), e utilizar a pseudo-classe focus?

[gRoOvE 0]

só fazer a linguagem javascript, manipular o css

 

elemento.style.backgroundColor = '#ff0000'; //coloque a cor em hexadecimal

 

hum.. como estamos falando de javascript, que é uma linguagem de interação com o cliente.. você precisa pensar em qual evento invocar.

 

no teu caso, um onfocus cai bem.

 

Pegar o elemento assim?

document.getElementById("id")

[William Bruno 1501]

ou então:

<input type="text" name="tal" onfocus="this.style.backgroundColor='#ff0000';" />

dá uma olhada no link do Imaggens.

[gRoOvE 0]

Interessante o uso da pseudo-classe..

Dessa forma que você falou, como faria pra voltar o campo a formatação padrão com um onblur ?

[mauelement 0]

Você pode utilizar o evento focusin e focusout. por exemplo:

 

<style type="text/css">
.item-focado { bordeR: 1px solid red; }
</style>


$(document).ready(function (){
							
	$('form input').focusin(function (){
	$(this).addClass('item-focado');							
							   });
	
	$('form input').focusout(function (){
	$(this).removeClass(item-focado);
								 });
						  
						  });

Onde quando hover o focus no input, ele vai adicionar a classe css: .item-focado. E quando o focu sair do input, ele vai remover a classe que antes estava setada.

[gRoOvE 0]

Obrigado pela contribuição mauelement, mas não quero usar Jquery, ai fica fácil demais, hehe.

[William Bruno 1501]

tentou fazer cara?

 

é só fazer no onblur o style receber outra coisa.. ou seja, a coisa default..

no link do Imaggens tinha tudo isso... se você não tentar, não pesquisar, ou não ler... fica bem dificil te ajudar só por aqui.

[mauelement 0]

Naada cara hehe. estamos ai !

 

Mas só por curiosidade , se qusier responder é claro.

 

Pq não quer utilizar jquery? sendo ele como você mesmo disse, mas fácil! não é o ideal?

 

E não só é o mais fácil, como também é o mais otimizado e correto, por evitar ao máximo o uso de códigos inline no próprio html, evitar também códigos "extras" para funcionar determinados pseudo-elementos. o arquivo de js ter um tamanho menor etc etc etc... eu vejo tantos benefícios. rsrsrsr

 

um abraçoou!

[gRoOvE 0]

tentou fazer cara?

 

é só fazer no onblur o style receber outra coisa.. ou seja, a coisa default..

no link do Imaggens tinha tudo isso... se você não tentar, não pesquisar, ou não ler... fica bem dificil te ajudar só por aqui.

 

Tentei fazer assim mas não deu:

<div id="nomeCampo">Nome:</div><input type="text" id="nome" onfocus="this.style.backgroundColor='#ff0'" onblur="this.className=''" />

No link do Imaggens está falando somente como fazer via CSS ou utilizando classes no onfocus, onblur..quero fazer pegando o objeto somente.

 

mauelement não é que não quero utilizar JQuery, apesar do pequeno conhecimento que tenho sobre ele já percebi que é uma ferramenta poderosa porém quero apenas estudar Javascript puro, não estou desenvolvendo nada, apenas pegando algumas coisas como exemplo e tentando implementar :))

Abraço.

[William Bruno 1501]

faz o inverso ne cara!?

 

<div id="nomeCampo">Nome:</div><input type="text" id="nome" onfocus="this.style.backgroundColor='#ff0';" onblur="this.style.backgroundColor='#fff';" />

como ele começou ?

 

sem background ? com background amarelo ?

no onblur, você aplica de novo oq tava antes...

 

só troque o className, se você tivesse trocado no onfocus

[gRoOvE 0]

Consegui. Esse .style.background='' é oriundo do CSS correto? Como manipular os outros atributos como border, font, etc?

[William Bruno 1501]

pesquise.

 

http://www.hebertphp.net/wordpress/?p=586

 

basta acessar a propriedade .style do elemento que você quer alterar, e ai depois pegar a propriedade css, em camelCase.. e alterar.

[Evandro Oliveira 331]

Interessante o uso da pseudo-classe..

Dessa forma que você falou, como faria pra voltar o campo a formatação padrão com um onblur ?

 

Não precisa fazer nada!!! A partir do momento que o elemento perde o foco, ele deixa de ser "#elemento:focus" e volta a ser "#elemento", simples assim!

[gRoOvE 0]

Evandro, tua informação não procede...se eu der um onfocus na input, quando clicar fora a mesma vai ficar com a formatação do onfocus, portanto tenho que declarar onblur.

 

pesquise.

 

http://www.hebertphp...ordpress/?p=586

 

basta acessar a propriedade .style do elemento que você quer alterar, e ai depois pegar a propriedade css, em camelCase.. e alterar.

 

Obrigado pelas informações :)

O que é camelCase?

[William Bruno 1501]

o Evandro se referia ao seletor css...

 

http://pt.wikipedia.org/wiki/CamelCase