olá pessoal,
estou tentando criar um formulário dinâmico usando javascript, vide código:
<html>
<head>
<title>Teste JQuery</title>
<script src="JQuery.js"></script>
<style>
label{
position: absolute;
margin-top: 15px;
height: 15px;
color: white;
border-radius: 3px 3px 0px 0px;
font-family: arial;
font-size: 13.9px;
text-shadow: 0px 0px 0.5px white;
width: 298px;
margin-left: 15.5px;
}
input{
height: 40px;
margin-top: 35px;
padding-top: 15px;
border-radius: 5px;
border-color: #cccccc;
border-width:1px;
width:300px;
margin-left: 15px;
}
</style>
</head>
<body>
<label class='aparecer'>Bom dia</label>
<input type='text' class='campo' name='dia' placeholder='Dê um alô'>
<label class='aparecer'>Boa noite</label>
<input type='text' class='campo' name='noite' placeholder='Dê um tchau'>
<script>
$(document).ready(function() {
$("input").focusin(function () {
$(".aparecer").animate({top:29},500); //label desce
$(".aparecer").css("background-color","green"); //label fica verde
$(".campo").css("border-color","green");
$(".campo").css("box-shadow","0px","0px","3px", "green");
});
$(".campo").blur(function () {
$(".aparecer").animate({top:10},1); //label volta para o lugar
$(".aparecer").css("background-color","white"); //label fica branca de novo
$(".campo").css("border-color","#cccccc");
$(".campo").css("box-shadow","0px","0px","0px", "white");
});
});
</script>
</body>
</html>
como observado acima, eu criei campos com nomes distintos, contudo com a mesma classe. quando executado junto com a jquery, este arquivo, ao clicar em um dos inputs, a borda fica verde e desce tipo uma etiqueta em cima do campo. o problema, é que isso deveria acontecer apenas com o campo em que está o foco. sei que o javascript tem uma função "this" para definir um elemento específico, só que não sei como aplicá-la, e também não sei se consigo utilizar o nome do campo de alguma forma como parâmetro para o evento. queria ideias de como solucionar isso. estou acostumada com php, que por assim dizer deixa você fazer o que quiser e aponta onde está o erro, neste caso, o js me deixa no escuro e não estou familirializada com a sintaxe, caso alguém conheça um laço ou função pra arrumar isso, ou puder me dar uma mão com a lógica... desde já agradeço
