2016-04-28 21 views
-1

私の質問のタイトルは、私が必要とするものを非常にうまく説明すると思います。たとえば、私のコードはテキストが入力された場合、入力枠の色を変更してください

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

です。境界線は赤です。もし私がそれにテキストを書くなら、私はそれを黒くする必要があります。おかげ

+0

、あなたの質問に解決にあなたの側からの努力を示してあなたの最高のコードを追加するために、常にてみてください自分の問題!欠点は、通常、私の意見では、学ぶべき素晴らしい方法である間違っていたことのコメントを得ることです。 –

答えて

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">

あなたが任意の値を削除する場合は、上記にも戻って赤に戻ります。
あなたは関係なく、より価値の長さの黒いそれを維持したい場合:

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

ちょうど素晴らしい。ありがとうございます<3 – davidxoma

+0

@davidxoma:Dあなたは大歓迎です! <3 –

関連する問題