Как сделать так, чтобы в поле поиска отображался какой-то текст и он исчезал при нажатии

Question

Я хочу, чтобы в моем поле поиска было указано "Где ты", чтобы оно исчезло при нажатии, и появилось снова, когда он щелкнул снаружи, оставив пустым.

Это форма поиска:

<div id="search-10" class="widget_search">
<form role="search" method="get" id="searchform" action="http://chusmix.com/?s=" onsubmit="window.location = action + s.value + '+: <?php the_search_query() ?>'; return false;">
 <div>
 <input class="ubicacion" type="text" value="" name="s" id="s2" style="margin-left:0px;">
 <input type="submit" id="searchsubmit" value="Buscar">
 </div>
 </form></div>

Я попробовал это, но по какой-то причине это не сработало:

<li id="search-10" class="widget_search">
<form role="search" method="get" id="searchform" action="http://chusmix.com/">
    <div>
    <input class="ubicacion" type="text" value="" name="s" id="s" style="margin-left:418px;">
    <input type="submit" id="searchsubmit" value="Buscar" onblur=" if(this.value== '') this.value='Where are you';" onfocus=" if(this.value=='Where are you') this.value=''; " value="Where are you" name="keyword" />
    </div>
    </form></li>

Answer 1

См. Пример ниже для необработанного JavaScript -

<input type="text" onblur=" if(this.value== '') this.value='Where are you';" onfocus=" if(this.value=='Where are you') this.value=''; " value="Where are you" name="keyword" />

Кроме того, вы можете использовать плагин jquery, dojo, mootools для обработки этого.

Answer 2

Это удаляет текст по умолчанию, когда пользователь нажимает на форму поиска, и добавляет его обратно, когда пользователь щелкает форму поиска.

<form id="searchform" method="get" action="search.php">
<input class="textbox" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" type="text">
<input type="submit" id="searchsubmit" value="" class="searchsubmit" />
</form>

Answer 3

Фальсифицируйте границу ввода, используя div, и поместите реальный ввод и метку внутри него - один сверху другого.

Скрывать метку, когда элемент получает фокус, и возвращать его, когда фокус теряется, если значение пустое.

Существует пример , использующий jQuery .