Ayuda con blur y focus :(

[xcoltx]

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

[crujikoki]

Hola,

Es la primera vez que veo algo de JQuery, y para poder ayudarte he tenido que "estudiar" un poco. Así que mi modesta opinión al respecto, es que en la función blur, concretamente cuando controals el value de la caja de texto, no regresas al estilo inicial.

Yo he añadido una linea a tu función blur y creo que es lo que buscas:

Código:

$('input[type="text"]').blur(function()
{
	$(this).removeClass("focusField").addClass("idleField");
        	if ($.trim(this.value) == '')
	{
		this.value = (this.defaultValue ? this.defaultValue : '');
		$(this).removeClass("idleField2").addClass("idleField");
	}
	else
	{
		$(this).addClass("idleField2");
	}	
});

Más concretamente he añadido la linea:

Código:

$(this).removeClass("idleField2").addClass("idleField");

Espero que te haya resulto el problema.
Saludos.

[xcoltx]

Oye crujikoki eres un capo..

Claramente esa era la solucion, me ha resultado excelente.

Gracias