Set Default Value Of A Password Input / A Scenario / Issue in IE 8

Question

plz see the below thread :
Set Default Value Of A Password
i followd the answer #1 like this for my purpose :

                <div id="headertxtPassWord-Container" class="header-login-input-Container">
                    <asp:TextBox ID="headertxtPassWord" runat="server" Text="password"
                    onclick="return onclickOfPassWord(this);" onblur="onblurOfPassWord(this);" 
                        CssClass="header-login-input"></asp:TextBox>
                </div>

function onclickOfPassWord(This) {
    if (This.value == 'password') {
        $('#headertxtPassWord-Container').html("<input id='headertxtPassWord' name='headertxtPassWord' type='password' value='' onclick='return onclickOfPassWord(this);' onblur='onblurOfPassWord(this);' class='header-login-input' />");
        $('#headertxtPassWord').focus();
    }
}

function onblurOfPassWord(This) {
    if (This.value == '') {
        $('#headertxtPassWord-Container').html("<input id='headertxtPassWord' name='headertxtPassWord' value='password' onclick='return onclickOfPassWord(this);' onblur='onblurOfPassWord(this);' class='header-login-input' />");
    }
}

but my codes has a problem in IE 8 and in firefox every thing is ok / how can fix that ?

problem
that textbox never focus again after click ....
do we have any loot here ?

Bobby · Accepted Answer · 2011-10-30T16:09:06.210

Try this code and see if it helps. I tried to mimic your example so it makes more sense.

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');
    }
});

Also a js fiddler to see a working example http://jsfiddle.net/V2Dh5/3/

Edited

This is the fix for 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);
    }
}

Look at the js fiddler at http://jsfiddle.net/V2Dh5/17/

thanks dear bro for answer / but your example has problem in IE 8 -> does not work at all! in fire fox every thing is ok / i hate IE 8.any idea? — SilverLight, Oct 29 '11 at 21:29
Apologise for the previous answer @MoonLight your right it does not work in IE 8. But I see the problem now stupid IE 8 dosent allow you to change the type attribute of an element when the doument is loaded. So the only way to make it work in IE 8 is to replace the whole input element (see edited answer). Please remember the code is only showing you the concept. I would not recommend hard coding full element string like that instead use the jquery element appenders. — Bobby, Oct 30 '11 at 16:07
really appreciate for attention and edit -> if i could , i give you 2 votes for your answer / setTimeout was a good idea ! — SilverLight, Oct 30 '11 at 22:44

Set Default Value Of A Password Input / A Scenario / Issue in IE 8

1 Answers1

Linked