Используем 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.

Эта часть добавит в Вашу форму эффект при нажатии. Нам необходимо достичь 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(). Данная функция убирает пробелы до и после текста, введеного юзером. Имейте ввиду, что если пользователь ничего не заполнит в  форме, а оставит текст по умолчанию, тогда форма все равно обработается. Можно исправить это с помощью специального скрипта проверки при нажатии кнопки "Отправить".

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