среда, 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"/>


3 комментария:

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

    ОтветитьУдалить
    Ответы
    1. Статью то прочти) они об этом написали

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

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