Question

如果用户键入一个字符并删除键入的所有内容并单击下一个字段或在用户停止输入后立即显示成功消息，我会尝试使用错误消息动态更新我的span。

我的HTML：

 Full name:
<input type="text" id="box1" />&nbsp;<span id="msg_out1"></span>

 password:
<input type="password" id="box2" />&nbsp;<span id="msg_out2"></span>

我的jQuery是这样的，至少这是我尝试过的：

jQuery( "#box1" ).click(function(){
    if (jQuery( "#box1" ).val() !="") {
        jQuery( "#msg_out1" ).html('&#10003; Great Name!').css('color','green').css('font-   size','18px').css('margin-left','40px');
    } else 
        jQuery( "#msg_out1" ).html('&#10008; Please Enter Your Name').css('color','red').css('font-size','18px').css('margin-left','40px');
});

示例：twitter

Answer 1

我认为最好的方法是在输入上使用“更改”事件。

所以会这样做：

$('.my-input').on('change', function(event) {
    /* validate if blank or something*/
});

当输入失去焦点时，将调用该函数。

Answer 2

我解决了这个问题。

正确的功能是：

jQuery( "#box2" ).on('keyup',function(event){
    if (jQuery( "#box2" ).val() !="") {
    jQuery( "#msg_out2" ).html('&#10003; Great Name!').css('color','green').css('font-size','15px').css('margin-left','40px');
 }else 
    jQuery( "#msg_out2" ).html('&#10008; Please Enter Your Name').css('color','red').css('font-size','15px').css('margin-left','40px');

});

如何使用错误消息或成功消息动态更新我的span？

2 个答案: