大家如果用户写了一些文本(或仍在书写),我想在输入字段旁边显示对勾,如果输入字段为空,则显示交叉。
这是我的尝试:
$('#myForm input').blur(function (){
if($(this).val() == '')
{
$(this).after("<img src='./media/img/cross.png' style='margin-top: 15px;'/>");
}
});
$('#myForm input').keypress(function (){
if($(this).val() != '')
{
$(this).after("<img src='./media/img/tick.png' style='margin-top: 10px; width: 1.5em; height: 1.5em;'/>");
}
});
每当用户键入字母时,上部代码都会添加图像。如何避免这种情况?有没有更优雅的方法可以做到这一点?
提前致谢。
更新
这是我的HTML:
<form id="myForm" name="loginForm">
<input type="text" class="input" placeholder="Username" id="username"/>
<input type="password" class="input" placeholder="Password" id="password"/>
<input type="submit" class="btns" value="Login" name="submitLogin"/>
</form>
最佳答案
将两个图像标签添加到html,并使用display: hidden
给它们一个类。使用事件不是用.after()
添加DOM元素,而是使用它们分别设置或取消设置img上的隐藏类,有点像这样:
$('#myForm input').blur(function (){
if($(this).val() == '')
{
$(this).next('.tick').addClass('hidden');
$(this).next('.tick').next('.cross').removeClass('hidden');
}
});
$('#myForm input').keypress(function (){
if($(this).val() != '')
{
$(this).next('.tick').next('.cross').addClass('hidden');
$(this).next('.tick').removeClass('hidden');
}
});
.hidden {display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" name="loginForm">
<input type="text" class="input" placeholder="Username" id="username"/><img class="hidden tick" src="#" alt="tick" /><img class="hidden cross" src="#" alt="cross" /><br/>
<input type="password" class="input" placeholder="Password" id="password"/><img class="hidden tick" src="#" alt="tick" /><img class="hidden cross" src="#" alt="cross" /><br/>
<input type="submit" class="btns" value="Login" name="submitLogin"/>
</form>