Используем jQuery для изменения стилей поля ввода формы при нажатии

Многие формы скучные и простые, не позвольте Вашей форме быть такой же. Этот урок покажет Вам как можно их улучшить с помощью классов CSS и значений по умолчанию, которые меняются в зависимости от выбора элемента формы.

Цель

Мы хотим сделать форму с полями для ввода, которые бы меняли свой внешний вид при нажатии. Давайте начнем, но прежде взглянем на пример.

Шаг №1 - Подготовка

Для начала необходимо подготовить саму форму.

 <form> <input name="status" id="status" value="Введите что-то здесь" type="text"/> <input value="Submit" type="submit"/> </form>

Я ввел "Введите что-то здесь" как значение по умолчанию для ввода. Это текст, который будет отображаться в форме, но при нажатии он исчезнет.

Шаг №2 - CSS

Теперь давайте сделаем форму красивой. Тут уже можно оформить все по Вашему вкусу, но обязательно необходимо включить классы для неактивного\активного состояния формы. Для этого я использовал значения idleField и focusField.

 <style type="text/css"> *{ margin:0; padding:0; font:bold 12px "Lucida Grande", Arial, sans-serif; } body { padding: 10px; } #status{ width:50%; padding:10px; outline:none; height:36px; } .focusField{ border:solid 2px #73A6FF; background:#EFF5FF; color:#000; } .idleField{ background:#EEE; color: #6F6F6F; border: solid 2px #DFDFDF; } </style>

Также важно заметить, если Вы хотите убрать голубое свечение, которое отображается в Safari вокруг поля ввода при нажатии мышкой, Вам необходимо включить в CSS файл следующее значение outline:none.

Шаг №3 - jQuery

Эта часть добавит в Вашу форму эффект при нажатии. Нам необходимо достичь 2-х результатов: 1) Выбранное поле должно перейти из неактивного в активное состояние, и при этом должен поменяться CSS класс; 2) Текст по умолчанию ("Введите что-то здесь") должен исчезнуть. Также мы хотим, чтобы поле теряло фокус (не выделялось) при переходе на следующий элемент страницы или формы.

 $(document).ready(function() { $('input[type="text"]').addClass("idleField"); $('input[type="text"]').focus(function() { $(this).removeClass("idleField").addClass("focusField"); if (this.value == this.defaultValue){ this.value = ''; } if(this.value != this.defaultValue){ this.select(); } }); $('input[type="text"]').blur(function() { $(this).removeClass("focusField").addClass("idleField"); if ($.trim(this.value == '')){ this.value = (this.defaultValue ? this.defaultValue : ''); } }); });

Давайте подробно рассмотрим каждую часть:

Для каждого текстового поля применить класс idleField

 $('input[type="text"]').addClass("idleField");

Когда на поле нажимают мышкой, необходимо удалить неактивный стиль и добавить активный.

 $('input[type="text"]').focus(function() { $(this).removeClass("idleField").addClass("focusField"); });

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

 if (this.value == this.defaultValue){ this.value = ''; }

Если пользователь уже что-то напечатал в поле, текст не удаляется, а выделяется. За это отвечает код:

 if(this.value != this.defaultValue){ this.select(); }

Код ниже описывает правила про то, что должно случиться, когда пользователь отводит мышку и переходит дальше.

 $('input[type="text"]').blur(function() { $(this).removeClass("focusField").addClass("idleField"); if ($.trim(this.value) == ''){ this.value = (this.defaultValue ? this.defaultValue : ''); } });

Стоит обратить внимание на использование $.trim(). Данная функция убирает пробелы до и после текста, введеного юзером. Имейте ввиду, что если пользователь ничего не заполнит в  форме, а оставит текст по умолчанию, тогда форма все равно обработается. Можно исправить это с помощью специального скрипта проверки при нажатии кнопки "Отправить".