megafon4u.ru

Если Вы обращали внимание, форма входа на сайте Яндекса выполнена довольно интересным способом. Вернее не вся форма, а поле ввода пароля.
Как известно, при вводе данных в поле типа "password", мы не увидим вводимых символов. Они будут заменены на точки. Тоже самое будет, если для этого поля указать атрибут "value='Пароль'".
Желаемое поведение такое:
по умолчанию в поле ввода находится слово "Пароль";
при клике на нем, оно очищается;
далее, символы вводятся так, как и ожидается для поля типа "password";
в случае потери фокуса, когда в поле ничего нет, в нем снова появляется слово "Пароль";
в случае потери фокуса, когда в поле введены какие либо данные, они остаются;
при последующем получении фокуса, поле не очищается;
выключение скриптов в браузере не должно мешать работе с формой входа.
Реализовать это можно следующим образом. Воспользуемся тем, что при щелканьи на label, имеющий атрибут for со значением, равным атрибуту "id" поля "password", фокус перейдет на это поле ввода.
Хтмл-код:

<form action="">
  <div class="form-item">
    <label for="parol">Пароль</label>
    <input type="password" id="parol" />
  </div>
</form>

Код цсс:

.form-item{ position:relative; width:100px}
.form-item input{ width:100px}
.form-item label{ width:100px;left:3px; top:0; z-index:5}

Сейчас, при щелканьи на слове "Пароль", фокус переведется на поле ввода.
Дополним код скриптами (сразу скажу, что буду использовать библиотеку jQuery, так как не представляю сейчас без нее ни одного мало-мальски серьезного проекта):

$(function(){
	$('.form-item label').css('position', 'absolute');
	$('.form-item input').val('').blur();
	$('.form-item label').bind('click', function(event){
		$(this).text('').next('input').val('');
		$(this).next('input').bind('blur', function(event){
			if($(this).val()==''){
				$(this).prev('label').text('Пароль')
			}
		});
	});
});

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