Skript zum Ändern des Div-Hintergrunds über Eingabe benötigt

Question

Wenn ich zurück gehe und die Daten lösche, die das Eingabefeld leer lassen, kehrt der Hintergrund nicht zu seiner Originalfarbe zurück, WENN ICH TYPE A "0".

Ich brauche die Hintergrundfarbe des DIV, um zu seiner ursprünglichen Farbe zurückzukehren, wenn es leer ist.

Was mache ich falsch?

<script> 
$(document).ready(function() { 

    $("#id").keypress(function() { 
     if ($("#id").val().length > 0) $("#in").css("background-color", "red"); 
     else { 
      if ($("#id").val().length == 0) $("#in").css("background-color", "grey"); 
     } 
    }); 

});​ 
</script> 

Answer 1

Dieses sollte ... arbeiten

<script> 

$(document).ready(function() { 

    $("#id").keyup(function() { 
     if($("#id").val().length > 0) { 
      $("#in").css("background-color", "red"); 
     } 
     else { 
      $("#in").css("background-color", "grey"); 
     } 
    }); 
});​ 

</script> 

Answer 2

Das Problem ist, weil Sie keypress verwenden, die vor der Wirkung der Taste aufgerufen wird ausgeführt. Wenn Sie keyup verwendet dies funktionieren wird:

$("#id").keyup(function() { 
    if ($(this).val().length > 0) { 
     $("#in").css("background-color", "red"); 
    } 
    else { 
     $("#in").css("background-color", "grey"); 
    } 
}); 

Auch als @ mblase75 wies darauf hin, Sie nicht die length des Wertes in der sonst Bedingung testen müssen.

Example fiddle

Wenn Sie diesen Code noch weiter vereinfachen wollte, können Sie einfach eine ternäre Anweisung mit .val().length als Bedingung verwenden, als eine positive ganze Zahl ist wahr gleichzusetzen:

$("#id").keyup(function() { 
    $(this).css("background-color", $(this).val().length ? "red" : "grey"); 
}); 

Answer 3

Sie würden wollen keyup verwenden, um den Charakter zu berücksichtigen, die gerade eingegeben wurde:

$(function(){ 
    $("#id").keyup(function() { 
     $("#in").css("background-color", $(this).val().length > 0 ? "red" : "grey"); 
    }); 
});​ 

Hier ist ein jsFiddle zu demonstrieren.

Answer 4

Verwenden keyUp

<script> 
$(document).ready(function(){ 

$("#id").keyup(function() { 
    if($("#id").val().length > 0) $("#in").css("background-color", "red"); 
    else { 
    if($("#id").val().length == 0) $("#in").css("background-color", "grey"); 
} 

}); 
}); 
</script> 

Answer 5

In Ihrem Fall 'keypress' Ereignis vor input.val() aufgerufen hat. Länge verändert. Und Ihr Code Run Selector retreiving fünfmal, statt eins.

Blick auf diesen Code, es funktioniert gut:

html:

<input id="id" type="text" autocomplete="off"> 
<div class="in"></div>​​​ 

css:

.in {width:200px; height:20px; background-color:#grey;} 
.in-red {background-color:red;} 

js:

$(function(){ 
    var $in = $('.in'); 
    $('#id').on('keyup', function(){ 
     $this = $(this); 
     if ($this.val().length > 0) { 
      $in.addClass('in-red'); 
     } else { 
      $in.removeClass('in-red'); 
     } 
    }); 
});​ 

Und Sie können testen es auf http://jsfiddle.net/Qhkev/1/