試圖填充輸入字段，當用戶點擊輸入外jquery

Question

我對jquery很新，所以很抱歉，如果這是基本的。

我目前有一個功能，可以清空用戶名輸入字段的值，以便用戶在輸入用戶名前不必刪除它。

$("#usernameInput").click(function(){ 
     $(this).val(""); 
    }); 

但我堅持試圖重新填充輸入字段與「用戶名」如果輸入字段的用戶沒有輸入任何東西，一旦他們當輸入字段外的點擊已經點擊了它，並清除後它與以前的功能。

這是我到目前爲止已經試過：

$("html").click(function(){ 
    if($("usernameInput").val() == " "){ 
     $("usernameInput").val("username"); 
    } 
    else{ 
     //do nothing as user has entered username 
    } 


}); 

感謝

Answer 1

你通常使用的重點和模糊事件爲

$("#usernameInput").on({ 
    focus: function(){ 
     if (this.value.trim() == 'username') this.value = ''; 
    }, 
    blur: function() { 
     if (!this.value.trim().length) this.value = 'username'; 
    } 
}); 

或HTML5可以使用佔位符

<input type="text" id="usernameInput" placeholder="username" /> 

FIDDLE

Answer 2

試試這個

$("#usernameInput").focusout(function(){ 
    if(this.value == ""){ 
     $("usernameInput").val("username"); 
    } 
    else{ 
     //do nothing as user has entered username 
    } 

}); 

Answer 3

$("#usernameInput").focus(function(){ 
    $(this).val(""); 
}); 

$("#usernameInput").blur(function(){ 
    if($(this).val().length < 1) 
    { 
     $(this).val("username"); 
    } 
});