Question

当我关注输入或输入不为空时，我希望输入相关图标的颜色会发生变化。但是当输入不为空时，我的代码无法正常工作。

                    <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

您可以使用:valid伪类在纯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”元素有效
您可以指定正则表达式模式以将约束置于有效的值上，或使用minlength属性

查看完整文档here。标准的html表单/输入字段非常强大，所以你可以用它们完成很多工作。

Answer 2

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

$( ".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>

Answer 3

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

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

3 个答案: