Стирание текста в поле поиска
 

Привет всем. Я тут новичок. Нужна помощь.
Сейчас я на сайте делаю поиск. Вот изображение:

Вот код:

<div id="search">
		<div id="sterka" onclick="document.getElementById('searchbox').value = ''; $('#sterka').remove(); $('#searchbox').focus();"></div>
        <form method="get" id="searchform" action="?">
		   <div id="searchformobv">
		   <font class="textpoisk"><input type="text" maxlength="50" value="Поиск по каталогу..." onfocus="if (this.value == 'Поиск по каталогу...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск по каталогу...';}" name="s" id="searchbox"/></font>
           <input type="submit" class="submitbutton" value="" />
		   </div>
        </form>
</div>

Как видите по коду, при клике по крестику - он исчезает и фокус оказывается в поле.

Задача: Нужно чтоб крестик изначально был скрыт, а появлялся только тогда, когда в поле введён какой либо текст(конечно, не равный "Поиск по каталогу...").


Очень жду ответов в своей первой теме на данном форуме :)

Упрощеный пример

<style>
#close {
   width: 20px;
   height: 20px;
}
.on {
   background: url('http://javascript.ru/forum/images/smilies/smile.gif') no-repeat center center;
}
</style>

<script>
function Go(Obj) {
   if (Obj.value!='') {
      document.getElementById('close').className='on'
   }
}
</script>

<div id='close'></div>
<input type='text' onkeyup='Go(this)' />

ksa, Ваш пример упрощён настолько, что даже картинки после стирание текста - не исчезает.
Я понял какой путь Вы предлагаете, но не знаю можно ли идя по нему, качественно решить всю поставленную задачу.
Хотя..., может и можно. Сёдня попробую. Вообще, хочу с использованием Jquery всё сделать.

Дело благородное... :D

А это уже тебе т.с. домашнее задание. :D

Вот работающий код, который я смог написать:

<script type="text/javascript">
function Gosterka(Obj) {
   if (Obj.value!='' & Obj.value!='Поиск по каталогу...') {
      document.getElementById('sterka').style.display='block';
   } else {document.getElementById('sterka').style.display='none'; }
}
</script>

<style>
#sterka {display:none; ... }
</style>

		<div id="search">
		<div id="sterka" onclick="document.getElementById('searchbox').value = ''; document.getElementById('sterka').style.display='none'; $('#searchbox').focus();"></div>
        <form method="get" id="searchform" action="<?php if(is_home()) { echo "?";} else { bloginfo('home');} ?> ">
		   <div id="searchformobv">
		   <font class="textpoisk"><input type="text" maxlength="50" onkeyup='Gosterka(this)' value="<?php if ($s) { echo "$s";} else { echo "Поиск по каталогу...";} ?>" onfocus="if (this.value == 'Поиск по каталогу...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск по каталогу...';}" name="s" id="searchbox"/></font>
           <input type="submit" class="submitbutton" value="" />
		   </div>
        </form>
        </div>

Вообще, сайт на движке Wrodpress.
В переменную $s заносится слово, которое ищется. Но об этом не стоит говорить, т.к. это нас не касается.

1. Что вы думаете о моём коде?

2. Есть проблема: Когда вбиваешь слово и ищешь его на сайте - страница обновляется и крестик то исчезает. Понятно почему, но не понятно как с этим справится.:(

3.Очень хочу, чтоб кто-нибудь помог переделать мой код на код с максимально полным использованием JQuery.

4. И очень хотелось бы сделать перемещение курсора после нажатия на крестик.


Новички атакуют! :write:

Обычно такие проблемы когда "не понятно почему"... :) Если понятно - сразу ясно как бороться.
Как вариант иметь два класса ОН и ОФФ... При перезагрузке страницы анализоровать какой из классов "дать крестику"... Ну и таки дать ему нужный. :)

ksa, извините что так долго не отвечал. У меня щас сессия просто(

function Vosterka() {
var var1 = document.getElementById("searchbox").value;
 if (var1!='Поиск по каталогу...') {
      document.getElementById('sterka').style.display='block';
   }
}

<script type="text/javascript">
function Gosterka(Obj) {
   if (Obj.value!='' & Obj.value!='Поиск по каталогу...') {
      document.getElementById('sterka').style.display='block';
   } else {document.getElementById('sterka').style.display='none'; }
}
</script>

<style>
#sterka {display:none; ... }
</style>

...
<body onLoad="Vosterka()">
...

		<div id="search">
		<div id="sterka" onclick="document.getElementById('searchbox').value = ''; document.getElementById('sterka').style.display='none'; $('#searchbox').focus();"></div>
        <form method="get" id="searchform" action="<?php if(is_home()) { echo "?";} else { bloginfo('home');} ?> ">
		   <div id="searchformobv">
		   <font class="textpoisk"><input type="text" maxlength="50" onkeyup='Gosterka(this)' value="<?php if ($s) { echo "$s";} else { echo "Поиск по каталогу...";} ?>" onfocus="if (this.value == 'Поиск по каталогу...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск по каталогу...';}" name="s" id="searchbox"/></font>
           <input type="submit" class="submitbutton" value="" />
		   </div>
        </form>
        </div>

Осталось добавить код перемещения курсора на 30px вправа после нажатия на крестик)

А как его переместить? Что-то я в Инете ничего нормального про это не нашёл почитать(

"Мышиного" курсора?

Мне-то пофиг... :D