Попробуйте этот код и посмотрите, поможет ли он. Я пытался подражать вашему примеру, чтобы он имел больше смысла.
HTML
<div id="headertxtPassWord-Container" class="header-login-input-Container">
<input id="headertxtPassWord" value="password" class="header-login-input" />
</div>
JQuery
$('.header-login-input').bind('click', function() {
if ($(this).val() === "password")
{
this.type = "password";
$(this).val('');
}
});
$('.header-login-input').bind('blur', function() {
if ($(this).val() === "")
{
this.type = "text";
$(this).val('password');
}
});
Также js fiddler, чтобы увидеть рабочий пример http://jsfiddle.net/V2Dh5/3/
Отредактировано
Это исправление для IE 8
$('.header-login-input').live('click', PopulateElement);
$('.header-login-input').live('blur', function() {
if ($(this).val() === "")
{
$(".header-login-input-Container").html('');
$(".header-login-input-Container").html("<input id=\"headertxtPassWord\" name=\"headertxtPassWord\" class=\"header-login-input\" value=\"password\" type=\"text\"/>");
}
});
function PopulateElement () {
if ($(this).val() === "password")
{
$(".header-login-input-Container").html('');
$(".header-login-input-Container").html("<input id=\"headertxtPassWord\" name=\"headertxtPassWord\" class=\"header-login-input\" type=\"password\"/>");
setTimeout(function() { $("#headertxtPassWord").focus()}, 10);
}
}
Посмотрите на скрипач js на http://jsfiddle.net/V2Dh5/17/