Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.02.2011, 02:31
Новичок на форуме
Отправить личное сообщение для Misha1990 Посмотреть профиль Найти все сообщения от Misha1990
 
Регистрация: 24.02.2011
Сообщений: 4

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

Вот код:
<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>


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

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


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

Последний раз редактировалось Misha1990, 24.02.2011 в 03:52.
Ответить с цитированием
  #2 (permalink)  
Старый 24.02.2011, 09:05
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Misha1990
Нужно чтоб крестик изначально был скрыт, а появлялся только тогда, когда в поле введён какой либо текст
Упрощеный пример

<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)' />
Ответить с цитированием
  #3 (permalink)  
Старый 24.02.2011, 12:20
Новичок на форуме
Отправить личное сообщение для Misha1990 Посмотреть профиль Найти все сообщения от Misha1990
 
Регистрация: 24.02.2011
Сообщений: 4

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

Последний раз редактировалось Misha1990, 24.02.2011 в 12:43.
Ответить с цитированием
  #4 (permalink)  
Старый 24.02.2011, 13:03
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Misha1990
Вообще, хочу с использованием Jquery всё сделать.
Дело благородное...

Сообщение от Misha1990
даже картинки после стирание текста - не исчезает
А это уже тебе т.с. домашнее задание.
Ответить с цитированием
  #5 (permalink)  
Старый 25.02.2011, 02:08
Новичок на форуме
Отправить личное сообщение для Misha1990 Посмотреть профиль Найти все сообщения от Misha1990
 
Регистрация: 24.02.2011
Сообщений: 4

Вот работающий код, который я смог написать:
<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. И очень хотелось бы сделать перемещение курсора после нажатия на крестик.


Новички атакуют!
Ответить с цитированием
  #6 (permalink)  
Старый 25.02.2011, 10:23
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Misha1990
страница обновляется и крестик то исчезает. Понятно почему, но не понятно как с этим справится
Обычно такие проблемы когда "не понятно почему"... Если понятно - сразу ясно как бороться.
Как вариант иметь два класса ОН и ОФФ... При перезагрузке страницы анализоровать какой из классов "дать крестику"... Ну и таки дать ему нужный.
Ответить с цитированием
  #7 (permalink)  
Старый 28.02.2011, 23:43
Новичок на форуме
Отправить личное сообщение для Misha1990 Посмотреть профиль Найти все сообщения от Misha1990
 
Регистрация: 24.02.2011
Сообщений: 4

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 вправа после нажатия на крестик)

А как его переместить? Что-то я в Инете ничего нормального про это не нашёл почитать(
Ответить с цитированием
  #8 (permalink)  
Старый 01.03.2011, 09:03
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Misha1990
перемещения курсора на 30px вправа
"Мышиного" курсора?

Сообщение от Misha1990
извините что так долго не отвечал
Мне-то пофиг...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить координаты курсора в текстовом поле в пикселях prike Events/DOM/Window 4 23.05.2013 04:35
Выделение текста в текстовом поле. Как снять выделение с пробела вконце? Roman Koff Events/DOM/Window 10 01.07.2010 16:48
как отключить подсказки в поле поиска feritailor Элементы интерфейса 2 25.11.2009 12:31
Изменение текста слоя по изменениям в текстовом поле Воитель Общие вопросы Javascript 4 21.10.2008 11:03
вывод нужного текста в текстовом поле при нажатии на кнопку! fifo4ka Общие вопросы Javascript 7 06.05.2008 13:36