Cor do input

Front-end

23/08/2015

Estou querendo mudar o fundo do meu "<input >" quando inserir algo nele gostaria que mudasse de cor, tem como? se não tiver nada no input fique branco. Como fazer?
Marluce Neves

Marluce Neves

Curtidas 0

Respostas

Marluce Neves

Marluce Neves

23/08/2015

O post ficou um pouco para trás, tenho certeza que não responderam por não visualizarem.
GOSTEI 0
Jothaz

Jothaz

23/08/2015

Sempre existem várias forma de abordar a questão, veja uma: 



input[type="text"], textarea {
  background-color : #d1d1d1; 
}


<input type="text" />
<br /><br />
<textarea></textarea>
<br /><br />


Exemplo funcional jsfiddle
GOSTEI 0
Marluce Neves

Marluce Neves

23/08/2015

No link que postou não está mudando de cor, tem que clicar em algum local?
GOSTEI 0
Jothaz

Jothaz

23/08/2015

Na verdade não entendi o que você queria, depois de reler acho que entedi.
Eu prefiro usar jQuery, mas como você esta iniciando, segue um exemplo usando JavaScritp puro, não é a forma mais elegante, ms funciona e vai lhe dar um visão de como pode ser feito:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Teste</title>
        <meta charset="utf-8">
			<script type="text/javascript" language="JavaScript">
			function muda_cor(){

				//total de elementos no formulario (inputs, select, textarea...)
				total_elementos = document.forms.formulario.length;
				i=0;

				//enquanto não percorrer todos os elementos do formulario
				while(i < total_elementos)
				{
					if (document.forms.formulario.elements[i].type=="text")
					{
						if (document.forms.formulario.elements[i].value == "" )
						{
							document.forms.formulario.elements[i].style.backgroundColor  = 'white';
						}
						else
						{
							document.forms.formulario.elements[i].style.backgroundColor  = 'red';
						}
					}    
					i++;
				}
			}
		
		</script>
    </head>
    <body>
        <form action="" method="post" id="formulario">
			<input type="text" value=""   onkeyup="muda_cor();"  />
        </form>
		
    </body>
</html>
GOSTEI 0
Marluce Neves

Marluce Neves

23/08/2015

Ficaria melhor com JQuery? qual a função que utilizo?
GOSTEI 0
Jothaz

Jothaz

23/08/2015

1 - A função JavaScritp lhe atendeu?
2 - Seria isto mesmo que você queria?
3 - Você entendeu como a função funciona?
4 - Você consegue adaptar/melhorar a função que postei?

Para começar a usar o jQuery acho fundamental aprender bem os conceitos do JavaScritp, pois o jQueyr, pode a gorsso modo pode ser considerado nada mais que um JavaScript avançado.

Se você quer mesmo usar o jQuery o primeiro passo é estudá-lo, pois vai acrescentar uma outra forma de manipular os controles, sugiro os links abaixo, mas tem muito material disponível.

Learning Center https://learn.jquery.com/

Por onde começar com a jQuery http://i18n.2kminterativa.com.br/jquery/jquery-getting-started-pt_br.html

Para usar o jQuery para criar o mesmo efeito da função que postei seria algo assim:


<script type="text/javascript">
    $(document).ready(function () {
        $("input").keydown(function () {
			if ($(this).val()) {
				$(this).css("background-color","#0f0");
			}
			else {
				$(this).css("background-color","#fff");
			}
        });
    });
</script>


Como pode ser visto muda bem a forma de tratar os controles, então sugiro que primeiro absorva o básico e depois vá postando suas dúvidas, pois começar direto no jQuery pode ser frustrante e você se perder.
GOSTEI 0
Marluce Neves

Marluce Neves

23/08/2015

Para as suas perguntas a resposta é sim, vou entender melhor o Javascript, os conceitos mesmo e treinar, antes de partir para um framework. Obrigada Jothaz.
GOSTEI 0
POSTAR