大家如果用户写了一些文本(或仍在书写),我想在输入字段旁边显示对勾,如果输入字段为空,则显示交叉。
这是我的尝试:

$('#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>

10-05 21:06
查看更多