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;
}
这是一个文件?如果是这样,你应该围绕的javascript
您的问题与范围。
valueInput
存在于.ready()
函数中,但不在.blur()
和.on()
函数中继承。在那些使用this
,这是触发事件的元素的引用。来源
2017-02-22 19:44:16 Gwellin
您可以使用:valid伪类在纯CSS中执行此操作。这允许你做沿着
几线的东西notes--
退房的完整文档here。标准的html表单/输入字段非常强大,所以你可以用它们做很多事情。
来源
2017-02-22 19:48:06 LukeG