Css/Html текстовое поле dissapearing текст не работает

Question

Я делаю website. Когда вы нажимаете на окно поиска, текст уходит, как и предполагалось, но, как только вы нажимаете, текст не возвращается, и я бы хотел. Вот мой фрагмент

<div class='search'> 
<form method="get" id='search' action="http://www.google.com/search"> 
<input type="hidden" name="q" size="31" maxlength="255" value="Site Name:" /> 
<input type="text" name="q" size="31" maxlength="255" style="height: 24px;" value="Search..." onFocus="this.value=''" /> 
</div> 

У меня есть много css за ним, чтобы текстовое поле увеличивало и меняло цвет. Вот код на всякий случай, если это уместно.

#search input[type="text"] { 
background: url(imgs/search-white.png) no-repeat 10px 6px #444; 
border: 0 none; 
font: bold 12px Arial,Helvetica,Sans-serif; 
color: #d7d7d7; 
width:150px; 
padding: 6px 15px 6px 35px; 
-webkit-border-radius: 20px; 
-moz-border-radius: 20px; 
border-radius: 20px; 
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
-webkit-transition: all 0.7s ease 0s; 
-moz-transition: all 0.7s ease 0s; 
-o-transition: all 0.7s ease 0s; 
transition: all 0.7s ease 0s; 
outline: none; 
} 

#search input[type="text"]:focus { 
background: url(imgs/search-dark.png) no-repeat 10px 6px #fcfcfc; 
color: #6a6f75; 
width: 175px; 
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
outline: none; 
} 
div.search 
{ 
position:fixed; 
top:8px; 
right:5px; 
} 

Когда окно щелкнул расширяет окно и Search... текст уходит, как это предполагается. Но как только вы нажмете, текст не вернется, и я бы хотел. Как мне это сделать? * примечание стороны извините, если сайт выглядит плохо IM 13

Answer 1

изменения:

<input type="text" name="q" size="31" maxlength="255" style="height: 24px;" value="Search..." onFocus="this.value=''" /> 

для:

<input type="text" name="q" size="31" maxlength="255" style="height: 24px;" placeholder="Search..." onFocus="this.value=''" /> 

Просто нужно изменить значение заполнителя :)

Answer 2

Если вы хотите он совместим со старыми браузерами (те, которые не поддерживают html5), вы можете сделать что-то вроде этого:

function removePlaceholder(element) { 
     if (element.value == "Search...") { 
      element.value = ""; 
     } 
    } 

    function replacePlaceholder(element) { 
     if (element.value == "") { 
      element.value = "Search..."; 
     } 
    } 

А затем установите input тег к этому:

<input type="text" name="q" size="31" maxlength="255" style="height: 24px;" value="Search..." onBlur = "replacePlaceholder(this)" onFocus="removePlaceholder(this)" /> 

Надеется, что это помогает!