Раскрытие кнопки поиска на JavaScript

**Raven** · 26.09.2014 20:51

Всем здравствуйте! Подскажите плиз, как можно реализовать в форме поиска появление кнопки "Поиск" только после установки курсора в саму форму? Чет всю голову сломал уже...
Вообще, как отразить в коде само условие постановки курсора в поле?

**kvins** · 26.09.2014 21:17

Есть куча событий mouseover onfocus, ты используешь чистый js или jquery тоже подключен ?

**Raven** · 26.09.2014 21:47

Я так полагаю, onFocus onBlur надо использовать?

---------- Сообщение добавлено 23:47 ---------- Предыдущее 23:40 ----------

А как проще будет? jquery подключен. Суть такова. Форма поиска с кнопками нескольких поисковиков. Ставишь курсор в форму - кнопки появляются, убираешь - пропадают.

**Raven** · 26.09.2014 22:24

И вообще, можно ли реализовать такую форму поиска?

Нажмите на изображение для увеличения. Название: Image 1.png Просмотров: 11 Размер: 2.1 Кб ID: 15647

Чтобы из одного поля ввода запрос передавался в соответствующий поисковик?

**kvins** · 27.09.2014 12:36

Raven, Да можно, а куда ты будешь получать ответ от поисковиков ??

И какой клас имееет кнопочка и поле формы, могу написать быстрый скрипт, тока предварительно спрячь с css кнопочку

**Morgan** · 27.09.2014 14:18

Пример на jquery и просто на css: _http://jsfiddle.net/9mgnucz5/

**Raven** · 27.09.2014 16:50

kvins, ответ от поисковиков пусть будет на их странице... С другим заморачиваться поди долго. Я вот чего тут на лепил ))

---------- Сообщение добавлено 18:50 ---------- Предыдущее 18:46 ----------

Php вместо подставления ссылки просто рисует её...

**Raven** · 27.09.2014 20:08

Morgan, Не работает... Может я не правильно подключил?

Код HTML:

<!doctype html> <html> <head> <META content="text/html; charset=windows-1251" http-equiv="Content-Type"> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <title>Форма поиска</title> <style>
#search-btn {
    display:none;
}
#search-field:focus + #search-btn {
    display:inline-block;
}
</style> <script type="text/javascript">
$('#search-field-js').focus(function(){
    $('#search-btn-js').show();
});

$('#search-field-js').blur(function(){
    $('#search-btn-js').hide();
});
</script> </head> <body> <form name="web" method="get" action="search.php"> <div class="search"> <input type=text id="search-field-js" name="text" size=18 value="" maxlength=80> <input type=submit name="knopka2" value="Яндекс" style="display:none" id="search-btn-js"> <input type=submit name="knopka2" value="Google"> <input type=submit name="knopka3" value="Mail"> <input type=submit name="knopka4" value="Bing"> <input type=submit name="knopka5" value="Wiki"> <input type=submit name="knopka6" value="DuckGo"> </div> </form> </body> </html>

**Morgan** · 27.09.2014 20:43

Вы определитесь, что вы хотите: на css или js. Из примера вы взяли и то, и то.
Если js, то код так должен выглядеть:

Код HTML:

<script type="text/javascript">
$(document).ready(function(){

$('#search-field-js').focus(function(){
    $('#search-btn-js').show();
});

$('#search-field-js').blur(function(){
    $('#search-btn-js').hide();
});
});
</script>

**Raven** · 27.09.2014 21:18

Morgan, спасибо, хот что-то работать начало) Но работает только первая кнопка, другие - нет... Код такой

Код HTML:

<!doctype html> <html> <head> <META content="text/html; charset=windows-1251" http-equiv="Content-Type"> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <title>Форма поиска</title> <script type="text/javascript">
$(document).ready(function(){

$('#search-field-js').focus(function(){
    $('#search-btn-js').show();
});

$('#search-field-js').blur(function(){
    $('#search-btn-js').hide();
});
});
</script> </head> <body> <form name="web" method="get" action="search.php"> <div class="search"> <input type=text id="search-field-js" name="text" size=18 value="" maxlength=80> <input type=submit name="knopka1" value="Яндекс" style="display:none" id="search-btn-js"> <input type=submit name="knopka2" value="Google" style="display:none" id="search-btn-js"> <input type=submit name="knopka3" value="Mail" style="display:none" id="search-btn-js"> <input type=submit name="knopka4" value="Bing" style="display:none" id="search-btn-js"> <input type=submit name="knopka5" value="Wiki" style="display:none" id="search-btn-js"> <input type=submit name="knopka6" value="DuckGo" style="display:none" id="search-btn-js"> </div> </form> </body> </html>

---------- Сообщение добавлено 23:18 ---------- Предыдущее 23:05 ----------

И php перестал срабатывать...

	26.09.2014 20:51 #1
Raven Новичок Регистрация: 16.04.2011 Сообщений: 25 Репутация: 12	Всем здравствуйте! Подскажите плиз, как можно реализовать в форме поиска появление кнопки "Поиск" только после установки курсора в саму форму? Чет всю голову сломал уже... Вообще, как отразить в коде само условие постановки курсора в поле? Последний раз редактировалось Raven; 26.09.2014 в 21:13.
0 Raven

	26.09.2014 21:17 #2
kvins Гуру Регистрация: 24.08.2011 Сообщений: 1,110 Репутация: 160	Есть куча событий mouseover onfocus, ты используешь чистый js или jquery тоже подключен ? Создаю сайты на Битрикс Тех поддержка на Битриксе
0 kvins

	26.09.2014 21:47 #3
Raven Новичок Регистрация: 16.04.2011 Сообщений: 25 Репутация: 12	Я так полагаю, onFocus onBlur надо использовать? ---------- Сообщение добавлено 23:47 ---------- Предыдущее 23:40 ---------- А как проще будет? jquery подключен. Суть такова. Форма поиска с кнопками нескольких поисковиков. Ставишь курсор в форму - кнопки появляются, убираешь - пропадают.
0 Raven

	26.09.2014 22:24 #4
Raven Новичок Регистрация: 16.04.2011 Сообщений: 25 Репутация: 12	И вообще, можно ли реализовать такую форму поиска? Чтобы из одного поля ввода запрос передавался в соответствующий поисковик?
0 Raven

	27.09.2014 16:50 #7
Raven Новичок Регистрация: 16.04.2011 Сообщений: 25 Репутация: 12	kvins, ответ от поисковиков пусть будет на их странице... С другим заморачиваться поди долго. Я вот чего тут на лепил )) ---------- Сообщение добавлено 18:50 ---------- Предыдущее 18:46 ---------- Php вместо подставления ссылки просто рисует её...
0 Raven

Раскрытие кнопки поиска на JavaScript

Опции темы

Спасибо сказали:

Спасибо сказали:

Спасибо сказали:

Тэги топика:

Похожие темы

Чем отличается плагин в фейсбуке кнопки лайк от кнопки подписаться?

FancyBox и JavaScript

Кто владеет javascript ом?

Анимированные кнопки без JavaScript

Javascript для поиска nofollow ссылок

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры

	27.09.2014 20:08 #8
Raven Новичок Регистрация: 16.04.2011 Сообщений: 25 Репутация: 12	Morgan, Не работает... Может я не правильно подключил? Код HTML: <!doctype html> <html> <head> <META content="text/html; charset=windows-1251" http-equiv="Content-Type"> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <title>Форма поиска</title> <style> #search-btn { display:none; } #search-field:focus + #search-btn { display:inline-block; } </style> <script type="text/javascript"> $('#search-field-js').focus(function(){ $('#search-btn-js').show(); }); $('#search-field-js').blur(function(){ $('#search-btn-js').hide(); }); </script> </head> <body> <form name="web" method="get" action="search.php"> <div class="search"> <input type=text id="search-field-js" name="text" size=18 value="" maxlength=80> <input type=submit name="knopka2" value="Яндекс" style="display:none" id="search-btn-js"> <input type=submit name="knopka2" value="Google"> <input type=submit name="knopka3" value="Mail"> <input type=submit name="knopka4" value="Bing"> <input type=submit name="knopka5" value="Wiki"> <input type=submit name="knopka6" value="DuckGo"> </div> </form> </body> </html>
0 Raven

	27.09.2014 21:18 #10
Raven Новичок Регистрация: 16.04.2011 Сообщений: 25 Репутация: 12	Morgan, спасибо, хот что-то работать начало) Но работает только первая кнопка, другие - нет... Код такой Код HTML: <!doctype html> <html> <head> <META content="text/html; charset=windows-1251" http-equiv="Content-Type"> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <title>Форма поиска</title> <script type="text/javascript"> $(document).ready(function(){ $('#search-field-js').focus(function(){ $('#search-btn-js').show(); }); $('#search-field-js').blur(function(){ $('#search-btn-js').hide(); }); }); </script> </head> <body> <form name="web" method="get" action="search.php"> <div class="search"> <input type=text id="search-field-js" name="text" size=18 value="" maxlength=80> <input type=submit name="knopka1" value="Яндекс" style="display:none" id="search-btn-js"> <input type=submit name="knopka2" value="Google" style="display:none" id="search-btn-js"> <input type=submit name="knopka3" value="Mail" style="display:none" id="search-btn-js"> <input type=submit name="knopka4" value="Bing" style="display:none" id="search-btn-js"> <input type=submit name="knopka5" value="Wiki" style="display:none" id="search-btn-js"> <input type=submit name="knopka6" value="DuckGo" style="display:none" id="search-btn-js"> </div> </form> </body> </html> ---------- Сообщение добавлено 23:18 ---------- Предыдущее 23:05 ---------- И php перестал срабатывать...
0 Raven

Темы	Раздел	Ответов	Последний пост
Чем отличается плагин в фейсбуке кнопки лайк от кнопки подписаться?	Социальные сети	2	12.11.2012 14:58
FancyBox и JavaScript	Web программирование	1	28.05.2012 19:55
Кто владеет javascript ом?	Web программирование	24	09.01.2012 16:34
Анимированные кнопки без JavaScript	Дайджест блогосферы	0	04.04.2011 16:43
Javascript для поиска nofollow ссылок	Софт, скрипты, сервисы	22	07.09.2009 14:05