1
私は入力に関連するアイコンの色を変更したいのですが、入力にフォーカスを当てるときや入力が空でないときに変更します。しかし、入力が空でないときには私のコードは正しく動作しません。入力が空でない場合、どのようにアイコンの色を設定できますか?
<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;
}
この一つのファイルですか?もしそうなら、あなたは
問題は有効範囲にあります。
valueInput
は.ready()
関数に存在しますが、.blur()
と.on()
関数内で継承されません。これらの使用では、イベントをトリガーした要素への参照であるthis
があります。出典
2017-02-22 19:44:16 Gwellin
これは、純粋なCSSで、:valid疑似クラスを使用して行うことができます。これは、あなたが必要か、あるいはそれが常に有効 になるように入力をマークする必要があり
の線に沿って何かを行うことができます。
を有効なものとして数えるものに制約を置くために正規表現パターンを指定、またはMINLENGTH属性を使用することができます
出典
2017-02-22 19:48:06 LukeG