试图填充输入字段，当用户点击输入外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"); 
    } 
});