«Всплывающие» подсказки для элементов формы

9 ноября, 2009

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

Но получение фокуса не отрабатывается, если мы пытаемся перетащить в поле ввода выделенный текст со страницы (drag-n-drop) или в браузере отключен JavaScript. В этой ситуации значение «по-умолчанию» нам приходиться удалять вручную и затем уже вводить наш текст.

Я попытался избавиться от этого недостатка и вообще не использовать значение «по-умолчанию» в поле ввода, вместо этого использовать стандартные теги заголовков элементов формы — label.

«Всплывающие» подсказки для элементов формы text и textarea. Каждый тег label привязан к соответствующему тегу input посредством параметра for. Через CSS label позиционируется над элементом input, как всплывающая подсказка и изчезает при получении инпутом фокуса. Если при потере фокуса, если значение input остаётся пустым, то видимость label восстанавливается.

Для большей доступности в браузерах с отключенным JavaScript label можно заранее стилизовать как не перекрывающий элемент input, а при наличии JavaScript программно устанавливать стиль.

Стандартный html-код формы:

<form id="feedback" method="post" action="">
	<div>
		<label for="usermsg">Ваше сообщение</label>
		<div><textarea name="usermsg" id="usermsg" cols="35" rows="8">{$usermsg}</textarea></div>
	</div>

	<div>
		<label for="username">Ваше имя <span>(необязательно)</span></label>
		<div><input name="username" id="username" value="{$username}" /></div>
	</div>
	<div>
		<label for="useremail">E-mail <span>(необязательно)</span></label>
		<div><input name="useremail" id="useremail" value="{$useremail}" /></div>
	</div>
</form>

По правилам w3c элементы формы должны быть обрамлены блочными тегами, например DIV. Функция скрипта запускается после загрузки страницы.

function feedback_labels(container_id) {
	labelsCollection = container_id.getElementsByTagName("LABEL");
	if (labelsCollection.length) {
		for (labelItem in labelsCollection) {
			if ("object" == typeof(labelsCollection[labelItem])) {
				if (labelItemInput = document.getElementById(labelsCollection[labelItem].htmlFor)) {
					labelItemRef = labelsCollection[labelItem];
					if (
						"text" == labelItemInput.type
						||
						"textarea" == labelItemInput.type
					) {
						labelItemRef.style.visibility = "visible";
						labelItemInput.ref = labelItemRef;

						labelItemInput.onfocus = function() {
							this.ref.style.visibility = "hidden";
						}

						labelItemInput.onblur = function() {
							if (!this.value) {
								this.ref.style.visibility = "visible";
							}
						}
					}
				}
			}
		}
	}
}
if (form_feedback = document.getElementById("feedback")) feedback_labels(form_feedback);

Пример работы скрипта можно посмотреть на странице обратной связи сайта ОАО «Маригражданстрой»