Исправленный вариант:
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);
}());
Пример