- Метки урока:
- jquery
- web дизайн
- формы
Используем 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(). Данная функция убирает пробелы до и после текста, введеного юзером. Имейте ввиду, что если пользователь ничего не заполнит в форме, а оставит текст по умолчанию, тогда форма все равно обработается. Можно исправить это с помощью специального скрипта проверки при нажатии кнопки "Отправить".
P.S. Примечания от переводчика. Если Вы не знаете как и куда вставлять код jQuery, то пройдите первые уроки бесплатного видеокурса Евгения Попова - "jQuery для начинающих" здесь.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.buildinternet.com
Перевел: Максим Шкурупий
Урок создан: 17 Марта 2009
Просмотров: 67253
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.