2013-12-08 53 views
0

如果用戶鍵入一個字符並刪除每個鍵入的內容並單擊下一個字段或在用戶停止鍵入時顯示成功消息,我試圖動態更新我的跨度並顯示錯誤消息。如何動態更新我的跨度錯誤消息或成功消息?

我的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

+0

也許你也想清空消息當用戶輸入。爲此,您可以使用keydown – Popnoodles

回答

0

我認爲要做到這一點的最好辦法是在輸入上使用「更改」事件。

所以會做這樣的事情:

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

這函數會被剛當輸入失去焦點。

+1

這與.blur – user3052886

+0

@popnoodles完全相同,這只是在此處輸入的錯誤,我的原始源代碼爲 – user3052886

+2

@ user3052886它與blur完全不同。 onChange事件僅在用戶更改字段的值時調用。當用戶離開對象而未必改變其值時,會觸發onBlur事件。 – Popnoodles

0

我解決了這個問題。

正確的功能是:

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'); 

});