Cor do input
23/08/2015
0
Marluce Neves
Posts
29/08/2015
Marluce Neves
29/08/2015
Jothaz
input[type="text"], textarea {
background-color : #d1d1d1;
}
<input type="text" />
<br /><br />
<textarea></textarea>
<br /><br />
Exemplo funcional jsfiddle
30/08/2015
Marluce Neves
31/08/2015
Jothaz
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>
31/08/2015
Jothaz
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.
31/08/2015
Marluce Neves
Clique aqui para fazer login e interagir na Comunidade :)
