入力が空でない場合、どのようにアイコンの色を設定できますか？

私は入力に関連するアイコンの色を変更したいのですが、入力にフォーカスを当てるときや入力が空でないときに変更します。しかし、入力が空でないときには私のコードは正しく動作しません。入力が空でない場合、どのようにアイコンの色を設定できますか？

    <div class="form-group"> 
         <label class="label-login" for="emailInput">Email</label> 
         <input type="email" class="form-control" autocomplete="off" id="emailInput" /> 
         <i class="fa fa-envelope"></i> 
        </div> 
        <div class="form-group"> 
         <label class="label-login" for="passInput">Password</label> 
         <input type="password" class="form-control" autocomplete="off" id="passInput" /> 
         <i class="fa fa-lock"></i> 

        </div> 

    $(document).ready(function() { 
    $(".myPanel .form-control").each(function() { 
    var valueInput = $(this); 
    valueInput.focus(function() { 
     valueInput.next().addClass("colorOrange");  
    }); 

    valueInput.blur(function() { 
     valueInput.next().removeClass("colorOrange"); 
    }); 
    valueInput.on('input', function() { 
     if (valueInput.val().length > 0) { 
      valueInput.prev().addClass("lableFocus"); 
      valueInput.next().addClass("colorOrange"); 
     } else { 
      valueInput.prev().removeClass("lableFocus"); 
      valueInput.next().removeClass("colorOrange"); 
     } 
    }); 
    }); 
}); 
    .colorOrange{ 
     color:#FFAE00; 
    }

出典

2017-02-22 user3903648

この一つのファイルですか？もしそうなら、あなたは

問題は有効範囲にあります。 valueInputは.ready()関数に存在しますが、.blur()と.on()関数内で継承されません。これらの使用では、イベントをトリガーした要素への参照であるthisがあります。

出典

2017-02-22 19:44:16 Gwellin

これは、純粋なCSSで、:valid疑似クラスを使用して行うことができます。これは、あなたが必要か、あるいはそれが常に有効になるように入力をマークする必要があり

notes--数

/* html */ 

    <div class="form-group"> 
     <label class="label-login" required for="passInput">Password</label> 
     <input type="password" class="form-control" autocomplete="off" id="passInput" /> 
     <i class="fa fa-lock"></i> 
    </div> 

/* css */ 
input:valid + i.fa-lock { 
    color: $your-valid-color; 
}

の線に沿って何かを行うことができます。

空でないタイプ=「text」の要素は、あなたが完全なドキュメントをチェックアウト

を有効なものとして数えるものに制約を置くために正規表現パターンを指定、またはMINLENGTH属性を使用することができます

有効になります here。標準的なhtmlフォーム/入力フィールドは非常に強力なので、それらだけで多くのことができます。

出典

2017-02-22 19:48:06 LukeG

入力が空でない場合、どのようにアイコンの色を設定できますか？

関連する問題