当输入不为空时如何设置图标的颜色？

Question

我希望当我专注于输入或输入不是时更改输入相关图标的颜色empty.but当输入不为空时我的代码无法正常工作。

                    <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;
  }

Answer 1

您的问题与范围有关。 valueInput 存在于 .ready() 函数中，但不在 .blur() 和 .on() 函数中继承。在这些中使用 this，这是对触发事件的元素的引用。

Answer 2

您可以使用 :valid 伪 class 在纯 CSS 中执行此操作。这允许您按照

的方式做一些事情

/* 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" 元素有效
您可以指定一个正则表达式模式来限制有效内容，或者使用最小长度属性

查看完整文档here。标准 html form/input 字段非常强大，因此您可以仅使用它们完成很多工作。

Answer 3

这是一个解决方案，我设法减少了代码的长度。希望这有帮助。

$( ".form-control" ).focusin(function() {
  $( this ).next( "i" ).css( "color", "#FFAE00" );
});
$( ".form-control" ).focusout(function() {
  $(this).val().length === 0 ? fontColor = "#000" : fontColor = "#FFAE00";
  $(this).next( "i" ).css( "color", fontColor );
});

.colorOrange {
  color: #FFAE00;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

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

当输入不为空时如何设置图标的颜色？

how can set color of icon when inputs are n't empty?

html

javascript

css

jquery

twitter-bootstrap