Всем доброго времени суток.
С вами Андрей Бернацкий.
Обратился ко мне знакомый с вопросом следующего содержания: Как сделать такие поля формы как на твоем с Виктором сайте (что бы в поле была подсказка, что нужно вводить, а по клику на форму она исчезала)?
Дел конечно сейчас много, но хорошим людям, почему б не помочь. Заодно решил написать о том как это реализуется на практике кратенькую статейку. Думаю, вам будет интересно.
И так, начинаем.
Для начала нам понадобиться файл placeholder.js, качаем его отсюда. Там, собственно, находится исходник.
Первый пример Вы можете посмотреть тут, а второй пример результат наших с Вами действий Вы можете посмотреть тут.
Все остальное, в общем-то, достаточно просто делается. Подключаем скаченный файл к странице. Думаю, вы это умеете, но все же, напомню, что подключаем его в части head следующим образом:
1 |
<script src="placeholder.js"></script> |
Далее мастерим нашу форму:
1 2 3 4 5 6 7 |
<form method="get" action=""> <input placeholder="поиск по сайту" id="hide_show"> <script type="text/javascript"> inputPlaceholder( document.getElementById('hide_show') ) </script> <input type="submit" value="go" /> </form> |
Что нас здесь интересует? Во второй строке параметр placeholder. В качестве значения этого параметра указываем тот текст, который мы хотим отобразить на форме. И обязательно указываем id. Этот id запоминаем. Именно его нужно указать в четвертой строке:
1 |
inputPlaceholder( document.getElementById('hide_show') ) |
Но есть нюанс. Куда ж без него. Изначально текст отображается серым цветом, а когда начинаем вводить свой текст он черный, верно? Нам нужно немного поиграть с цветами.
Чтобы получить нужный нам цвет у текста, который виден сразу (текст-подсказка), открываем файл placeholder.js. На 18-ой строке ищем запись:
1 |
var placeholder_color = color || '#AAA'; |
Как раз в конце строки (в кавычках) #AAA – это и есть цвет текста. Давайте поменяем цвет на красный. Вместо #AAA пишем #FF0000.
Текст стал красным. Это так, но когда вводишь свой текст, он по-прежнему черный. Для того что бы и наш текст стал красным, добавляем в CSS файл или в часть head (в зависимости от того где у вас описаны стили) свойство color для id нашего input-а:
1 2 3 |
#hide_show{ color:#FF0000; } |
Вот и все хитрости.
Что еще вам рассказать?
Думаю, у кого-нибудь возникнет вопрос: А что если мне нужно два поля с подсказками?
В этом случае каждому полю нужно задавать свои значения для id и эти же значения передавать скрипту, который находиться под формой. Ниже пример:
1 2 3 4 5 6 7 8 9 10 11 |
<form method="get" action=""> <input placeholder="поиск по сайту" id="hide_show1"> <script type="text/javascript"> inputPlaceholder( document.getElementById('hide_show1') ) </script> <input placeholder="вводи текст сюда" id="hide_show2"> <script type="text/javascript"> inputPlaceholder( document.getElementById('hide_show2') ) </script> <input type="submit" value="go" /> </form> |
Если что-то не получилось можно скачать архив примеров по данному уроку тут.
Надеюсь, урок был полезен. До встречи!
Урок подготовил: Андрей Бернацкий. Команда webformyself.
E-mail:contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
P.S. Хотите опубликовать интересный тематический материал? Если ответ «Да», то жмите сюда.
Комментарии (5)