如何在焦點上顯示/隱藏輸入值？

Question

我在網上看到這一點，但想知道是否有人有最簡單的JavaScript代碼來顯示模糊輸入值，但隱藏在焦點上。

Answer 1

這就是我使用的my blog。只要去那裏看看背後的源代碼。

function displaySearchText(text){ 
    var searchField = document.getElementById('searchField'); 
    if(searchField != null) 
     searchField.value = text; 
} 

你輸入字段應該是這個樣子：

<input id='searchField' name='q' onblur='displaySearchText("Search...");' onfocus='displaySearchText("");' onkeydown='performSearch(e);' type='text' value='Search...'/> 

Answer 2

我所知道的最簡單的方法是：

<input 
    name="tb" 
    type="text" 
    value="some text" 
    onblur="if (this.value=='') this.value = 'some text'" 
    onfocus="if (this.value=='some text') this.value = ''" /> 

Answer 3

如果你不關心有效的HTML，您使用placeholder屬性。它可以在Safari上運行，並且可以添加一些不引人注目的JS來在其他瀏覽器中模仿這種行爲。

更多閱讀：

• http://www.beyondstandards.com/archives/input-placeholders/（JS實現）
• http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/

和谷歌。 ;-)

該解決方案類似於Josh Stodola發佈的解決方案，但它更靈活，更通用。

Answer 4

這總是爲我工作：

<input 
    type="text" 
    value="Name:" 
    name="visitors_name" 
    onblur="if(value=='') value = 'Name:'" 
    onfocus="if(value=='Name:') value = ''" 
/> 

Answer 5

我喜歡jQuery的方式：

$(function(){ 
    /* Hide form input values on focus*/ 
    $('input:text').each(function(){ 
     var txtval = $(this).val(); 
     $(this).focus(function(){ 
      if($(this).val() == txtval){ 
       $(this).val('') 
      } 
     }); 
     $(this).blur(function(){ 
      if($(this).val() == ""){ 
       $(this).val(txtval); 
      } 
     }); 
    }); 
}); 

它是由扎克·珀杜修改Hide Form Input Values On Focus With jQuery。

Answer 6

由於這仍然出現在谷歌，我想指出，在HTML 5中，您可以使用輸入的佔位符屬性在一塊html中實現此目的。

<input type="text" id="myinput" placeholder="search..." /> 

佔位符現在是現代瀏覽器的標準，所以這真的是首選的方法。

Answer 7

對於所有瀏覽器：

<input onfocus="if(this.value == 'Your value') { this.value = '';}" onblur="if(this.value == '') { this.value = 'Your value';}" value="Your value" type="text" name="inputname" /> 

對於瀏覽器的最新版本：

<input type="text" name="inputname" placeholder="Your value" />