Ich habe ein Eingabefeld innerhalb eines div, und ich möchte den div Hintergrund ändern, wenn das Eingabefeld Daten in eingegeben hat.Ändern Sie den DIV-Hintergrund, wenn das INPUT-Feld Daten enthält. Wie?
Wie wird das gemacht?
Sie könnten versuchen, jQuery zu verwenden, um dieses Problem zu lösen. Laden Sie jQuery in Ihr <head>-Tag und hängen Sie das keypress-Ereignis in Ihrem Eingabefeld an, indem Sie dieses JavaScript-Snippet in einem Skript-Tag unterhalb der Einfügung von jQuery hinzufügen.
$(document).ready(function() {
$("#myInput").keypress(function() {
if($("#myInput").val().length > 0) $("#myDiv").css("background-color", "red");
});
});
$('div input').keypress(function() {
$(this).val().length > 0) {
$(this).parent().css("background-color","red");
} else {
$(this).parent().css("background-color","none");
}
});
Wenn Sie freundlich zu Ihren Web-Designer sein wollen und mit ihnen anfreunden, können Sie auch dynamisch anwenden und ein Klassenattribut entfernen:
$('div input').keypress(function() {
$(this).val().length > 0) {
$(this).parent().addClass("background");
} else {
$(this).parent().removeClass("background");
}
});
Dann Ihre Designer die einstellen In der CSS-Datei können Sie mit der CSS-Klassenhacke "Background" sehen und fühlen, ohne sich Sorgen machen zu müssen, dass Sie Ihr schönes JavaScript-Meisterwerk durcheinander bringen. Außerdem erhalten sie größere Flexibilität, um Änderungen vorzunehmen, ohne die gesamte Darstellungslogik in Ihren Geschäftslogikcode zu übernehmen.
/* Example CSS rule */
input.background {
background-color: red;
border-radius: 2px;
-webkit-box-shadow: 0 0 6px 4px red;
}
@ Xander - Danke! Antwort aktualisiert – jmort253
Versuchen Sie auch, Informationen zu den Einschränkungen hinzuzufügen, unter denen Sie arbeiten. Sind Sie auf eine bestimmte CSS-Version beschränkt? Verwenden Sie eine spezielle Javascript-Bibliothek oder gar keine Javascript-Bibliotheken? – Hauge