2016-04-28 8 views
-1

Ich denke, dass Titel meiner Frage sehr gut erklärt, was ich brauche. Zum Beispiel ist mein CodeÄndern Eingabefarbe Rand, wenn Text eingegeben wird

<head> 
<style> 
input{ border: 5px solid red;} 
</style> 
</head> 
    <div class="in"> 
     <input class="input" type="text" name="text" method="post"> 
     </div> 

Jetzt ist Grenze rot. Ich muss es schwarz machen, wenn ich Text darin schreibe. Dank

+0

Bitte, versuchen Sie immer auf Ihre Fragen zu Ihrem besten Code hinzufügen, eine Anstrengung von Ihrer Seite zeigt bei der Lösung Ihres eigenes Problem! Nachteile ist, dass Sie in der Regel auch Kommentare von dem bekommen, was Sie falsch gemacht haben, was meiner Meinung nach eine gute Art zu lernen ist. –

Antwort

0

var inputName = document.querySelectorAll("[name=text]")[0]; 
 

 
inputName.addEventListener("input", function(){ 
 
    var hasVal = this.value.trim().length > 0 
 
    this.style.border = "5px solid "+ (hasVal? "black" : "red"); 
 
});
input{ border: 5px solid red;}
<input class="input" type="text" name="text" method="post">

Die oben wird auch wieder auf ROT zurück, wenn Sie einen beliebigen Wert entfernen.
Wenn Sie es schwarz behalten wollen, unabhängig vom Wert der Länge als:

var inputName = document.querySelectorAll("[name=text]")[0]; 
 

 
inputName.addEventListener("input", function(){ 
 
    this.style.border = "5px solid #000"; 
 
});
input{ border: 5px solid red;}
<input class="input" type="text" name="text" method="post">

+0

Einfach genial. Vielen Dank <3 – davidxoma

+0

@davidxoma: D du bist willkommen! <3 –