使用jQuery時，如何在輸入框外單擊時更改輸入元素的值？

Question

<input type="text" size="13px" name="username" id="username" value="enter username" onclick='document.signIn.username.value = ""' /> 

$(function() { 
    $('#messageBoxSignIn').click(function() { 
     $('#username').val(''); 
     $('#username').focus(); 
    }); 
}); 

我目前有jQuery代碼，使輸入值爲空並將光標聚焦到文本區域#username當單擊ID爲#messageBoxSignIn的按鈕時。但是，當用戶點擊textarea #username而不輸入任何內容時，我希望輸入值返回到「輸入用戶名」。

我該怎麼做？

Answer 1

如果HTML5是好適合你，你可以使用placeholder屬性這一點。你不需要jQuery。

<input type="text" placeholder="Enter Username"> 

您可以試試here。

Answer 2

$('#username').blur(function(){ 
    if ($(this).val().length == 0) { 
     $(this).val('Enter Username'); 
    } 
}); 

或

$('#username').on('blur', function() { 
    if ($(this).val().length == 0) { 
     $(this).val('Enter Username'); 
    } 
}); 

Answer 3

<input type="text" name="search" value="enter username" onblur="if(this.value == '') { this.value='enter username'}" onfocus="if (this.value == 'enter username') {this.value=''}"> 

https://jsfiddle.net/IA7medd/ur9ctku2/

Answer 4

你這樣做是不對的。您需要將屬性「placeholder」添加到輸入元素。你不需要這個javascript。瀏覽器將自行更換。

http://www.w3schools.com/tags/att_input_placeholder.asp