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

当我关注输入或者输入不是空的时候，我想要改变输入的相关图标的颜色。但是当输入不为空时，我的代码无法正确工作。输入不为空时，如何设置图标的颜色？

    <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

这是一个文件？如果是这样，你应该围绕的javascript

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

来源

2017-02-22 19:44:16 Gwellin

您可以使用: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; 
}

几线的东西notes--

您需要按照要求，否则将永远是有效标记的输入。
非空型=“文本”元素将是有效的
你可以指定一个正则表达式把约束条件是什么算作有效，或使用MINLENGTH个属性

退房的完整文档here。标准的html表单/输入字段非常强大，所以你可以用它们做很多事情。

来源

2017-02-22 19:48:06 LukeG

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

相关问题