Доработка HTML Form при помощи jQuery

5 января 2009, PitBult

Нашел очень интересную статью, которая, надеюсь, будет интересна и не только мне.

В приведенных здесь примерах используется библиотека jQuery. Речь здесь пойдет о четырех усовершенствованиях – подсказках, автозаполнении, счетчике введенных символов и скрытых полях.

Всплывающие подсказки

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

HTML код:

Демонстрация примера подсказок для полей форм.


Установите курсор в одно из полей.

    Логин

    Введите имя пользователя (не более 20 символов)

    Пароль

    Введите Ваш пароль

JavaScript:

$(document).ready(function(){
	$('#myForm input').focus(function(){
		var name = $(this).attr('name');
		$('label.fieldHint[for="'+name+'"]').fadeIn('slow');
	}).blur(function(){
		var name = $(this).attr('name');
		$('label.fieldHint[for="'+name+'"]').fadeOut('slow');
	});
});

В начале, мы получаем ссылки на текстовые поля, для которых нужно показывать подсказки. Для этих полей мы устанавливаем обработчики событий onfocus и onblur, которые вызываются при получении и потере полем фокуса. В обработчиках этих двух событий мы получаем ссылки на сами подсказки (подсказки хранятся в элементах label с атрибутом for равным имени поля), и плавно показываем их функцией fadeIn().

Смотреть демо

Автозаполнение полей.

Автозаполнение – это такая функция, которая предоставляет варианты ответа при вводе пользователем текста в поле. Если пользователь выбирает один из предложенных вариантов, то он автоматически подставляется в текстовое поле.

Для реализации такой функции существует множество плагинов. В целях демонстрации я выбрал один из них – jQuery.autocomplete. Работает он предельно просто – нужно просто подключить скрипт и вызвать функцию autocomplete() для нужного поля, передав в качестве аргумента массив вариантов для заполнения либо URL из которого он будет получен.

HTML



Начинайте вводить слова в следующее поле (например, буквы C, П)

    Ключевое слово

JavaScript

$(document).ready(function(){
var data = "Селекторы Атрибуты Манипуляция События CSS Эффекты Ajax Утилиты Плагины Поиск DOM Функции Скрипты".split(" ");
$("#myForm input[name='keyword']").autocomplete(data);
});

Смотреть демо

Счетчик символов в текстовом поле

Некоторые текстовые поля форм имеют ограничение на ввод символов. В этом примере показана функция, которая вычисляет количество символов, которое пользователю еще можно ввести, и показывает это количество возле поля. При приближении этого числа к нулю, оно будет плавно изменять свой цвет на красный.

HTML



Начинайте вводить текст в поле "Имя пользователя"

    Имя пользователя

    осталось 20 символов

    Пароль

JavaScript

$(document).ready(function(){
	// вычисляем первоначальное значение счетчика и его цвет
	var value = $('#myForm input[name="username"]').attr('value') || '';
	var initLength = Math.max((value ? (20 - value.length) : 20),0);
	$('#username_counter').css('color', 'rgb('+(12*value.length)+', 0, 0)');
	$('#username_counter').html(initLength.toString());

	$('#myForm input[name="username"]').keyup(function(){
		var value = $(this).attr('value') || '';
		var lengthToGo = Math.max((20 - value.length),0);
		$('#username_counter').css('color', 'rgb('+(12*value.length)+', 0, 0)');
		$('#username_counter').html(lengthToGo.toString());
	});
});

Количество введенных элементов в поле вычисляется при событии onkeyup, значение счетчика устанавливается функцией html(), а цвет функцией css(). Для установки цвета используется формат RGB. В этом примере я использовал коэффициент 12, который умножался на количество введенных символов. Поскольку в примере максимальное количество символов равняется 20, то максимаьный уровень красного цвета счетчика равняется 240. Если вы будете использовать такой счетчик, то значение коэффициента нужно пересчитать, чтобы максимальный уровень красного цвета не превышал 255.

Смотреть демо

Скрытое текстовое поле

Этот пример помогает скрыть поля в форме, и показывать их лишь в том случае, если пользователь выбирает определенную опцию.

HTML



Хотите ли Вы получать новости на Email?
Нет
Да

        Введите Ваш email:

JavaScript

$(document).ready(function(){
	$('#newsletter-1').click(function(){
		$('#email').fadeIn('slow');
	});

	$('#newsletter-0').click(function(){
		$('#email').fadeOut('slow');
		$('input[name="email"]').attr('value','');
	});
});

Этот код предельно прост. Здесь используются всего лишь две функции fadeIn() и fadeOut(), которые соответственно показывают и скрывают скрытое поле. При скрытии поля мы также очищаем значение атрибута value, чтобы предотвратить отправку данных на тот случай, если пользователь что-то ввел в поле, а позже передумал и выбрал опцию “Нет”.

Смотреть демо
Источник: http://www.jstoolbox.com/2008/08/10/uluchshaem-html-formy-pri-pomoshhi-jquery/