saludos desde chile...
estoy adaptando un efecto bien sutil para los input text de un formulario:
- Cuando el DOM esta ready este se carga con una clase (css clase 1).
- Ahora cuando hago focus a esta se cambia de clase (css clase 2).
- Ahora escribo algo y al momento del blur se carga otra clase... (css clase 3),
(hasta ahora todo bien)...
resulta que cuando borro el texto del imput, este debiera revisar si hay texto escrito.. entonces si hay texto ponga la "clase 3" pero si no hay texto.. que vuelva a la "clase1". pero se queda pegada en la "clase 3".
no los enredo mas aqui esta mi codigo (estoyusando jquery)
Código:
<style type="text/css">
.acode{
width:60px;
font-size:9px;
height:30px;
line-height:14px;
border:2px solid #502000;
}
.focusField { background:#fff; color:#000; }
.idleField {
background-image:url(image.png);
background-repeat:no-repeat;
}
.idleField2{ background:#333; color:#fff; }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[type="text"]').addClass("idleField");
$('input[type="text"]').focus(function(){
$(this).removeClass("idleField").addClass("focusField");
if (this.value == this.defaultValue){
this.value = '';
}
if(this.value != this.defaultValue){
this.select();
}
});
$('input[type="text"]').blur(function() {
$(this).removeClass("focusField").addClass("idleField");
if ($.trim(this.value) == ''){
this.value = (this.defaultValue ? this.defaultValue : '');
}
else { $(this).addClass("idleField2"); }
});
});
</script>
<input class="acode" name="" type="text" maxlength="6" value="" />
<input name="" type="submit" value="Submit"/>
se que falta me poco y quizas es problema de 2 o 3 lineas
