Надпись в поле ввода password

[Octane]

Все никак не приходилось самому сделать такую штутку, вот сейчас спросили каким образом это можно реализовать, получился такой вариант:

CSS:

.field {
	position: relative;
}
.field label {
	position: absolute;
	top: 2px;
	left: 3px;
}
.field label.hidden {
	left: -9999px;
}

javascript:

window.onload = function () {
	var input = document.getElementById("pwd");
	var label = input.parentNode.getElementsByTagName("label")[0];
	if (!input.value) {
		label.className = "";
	}
	input.onfocus = function () {
		label.className = "hidden";
	};
	input.onblur = function () {
		if (!input.value) {
			label.className = "";
		}
	};
};

HTML:

<form action="">
	<fieldset>
		<div class="field">
			<label for="pwd" class="hidden">Enter password</label>
			<input id="pwd" type="password" />
		</div>
	</fieldset>
</form>

Пример

Вроде везде работает. Думаю, пригодится кому-нибудь.

[Kolyaj]

Вроде везде работает.

У тебя браузер пароли запоминает? Он когда их подставляет, никаких focus/blur не происходит, в результате наложение метки на пароль будет.

Решение: постоянно по таймауту проверять, не произошло ли чего с полями. А focus/blur остаются, чтобы запоминать состояние фокуса.

[Octane]

Хм… фокс пароли до window.onload подставляет, а я потом проверку делаю:

if (!input.value) {
    label.className = "";
}

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

[Octane]

Исправленный вариант:

CSS:

.field {
	position: relative;
}
.field label {
	position: absolute;
	top: 2px;
	left: 3px;
}
.field label.hidden {
	left: -9999px;
}

HTML:

<form action="">
	<fieldset>
		<div class="field">
			<label for="pwd" class="hidden">Enter password</label>
			<input id="pwd" type="password" />
		</div>
	</fieldset>
</form>

JаvaSсript:

var input = document.getElementById("pwd");
var label = input.parentNode.getElementsByTagName("label")[0];
var active = false;
function change() {
	label.className = input.value ? "hidden" : "";
}
input.onfocus = function () {
	active = true;
	label.className = "hidden";
};
input.onblur = function () {
	active = false;
	change();
};
(function () {
	if (!active) {
		change();
	}
	setTimeout(arguments.callee, 300);
}());

Пример

[pogranpv]

if (!input.value) {
    label.className = "";
}

а как без таймаута сделать? а то таймаут это же костыль

[Raydezm]

Увы, браузеры не оповещают о том что делают что-то с паролями и прочим автозаполнением.

setTimeout(arguments.callee, 300);

Использование callee устарело с выходом ES5, использовать не рекомендуется.
https://developer.mozilla.org/en-US/...guments/callee