среда, 11 марта 2015 г.

Как сделать поля ввода с "подсказками" с помощью jQuery и CSS

Иногда мало сделать просто красивый дизайн странички, а хочется еще дать пользователю какие-то подсказки по заполнению полей. Самый простой и наиболее очевидный способ - создать поля с подсказками в виде "текста по умолчанию", примерно вот такие:


В принципе, все современные браузеры, поддерживают стандарт HTML5 и, соответственно, атрибут placeholder, которой для этой цели и был придуман. Проблема в том, если вам необходима поддержка старых браузеры или чуть менее старые версии Internet Explorer (который начал поддерживать этот атрибут только в 10 версии), то подсказку созданную с помощью него они не увидят.
Если вы используете на своем сайте jQuery, то есть простое и быстрое решение для создания таких полей буквально несколькими строчками кода.  Прежде всего нужно создать стиль отображения "подсказок":

<style type="text/css">
    .helpField { background:white; }
    .blankHelpFieldText { color: #a1a1a1; font-style: italic; }
</style>


При этом, первый стиль несет в себе единственное практическое предназначение - быть "свойством" к которому будет привязываться скрипт отображения текста подсказки. Так что, вместо background можете написать что вам больше подходит, например width.


Вторая часть "шаманства" - скрипт показывающий и скрывающий нашу подсказку:




Главное, не забудьте заменить form_id на id вашей формы, а то подсказки из незаполненных полей будут отправлены на сервер при самбите.

Ну и самый последний штрих, добавить к полям input необходимые атрибуты, например для поля "Контактный телефон" на картинке будет так:

<input type="text" class="helpField" title="+7(495)123-45-67"/>


5 комментариев:

  1. это не учите людей плохому,это давно реализуется посредствам атрибутов HTML5.

    ОтветитьУдалить
  2. Если уж учите детей использовать костыли, так давайте хотя бы правильный код
    https://jsfiddle.net/2x4ryuce/

    ОтветитьУдалить
  3. Вроде бы получилось. А как сделать чтобы подсказки исчезали при простом наведении мыши (без клика)?

    ОтветитьУдалить
  4. Очень полезная информация. Наконец то я нашла то что искала. Спасибо.

    ОтветитьУдалить