Setup place-holder for the text-box input[type=" password"]
<p>I am trying to show placeholder text(enter password) for the text-box which has input[type="password"]. Now i am trying to  change the <em>input[type="password"]</em> to  <em>input[type="text"]</em> to show the placeholder and if the user click the text box i am again changing the <em>input[type="text"]</em> to <em>input[type="password"]</em>. Here it is not working please check script <br/> 
My <strong><a href="http://jsfiddle.net/sureshpattu/9HagB/3/" rel="nofollow">jsfiddle is here</a></strong></p>

<pre><code> function setupPasswordPlaceholder(thisEl)
    {
        if('' !== thisEl.attr("alt"))
        {
            if('' === thisEl.val())
            {
                thisEl.val(thisEl.attr("alt"));
                thisEl.removeAttr("type");
                thisEl.attr('type','text');
                thisEl.css({'font-weight':'normal','font-size':'10pt','color':'#999','font-family': '"lucida grande", tahoma, verdana, arial, sans-serif'});
            }
            thisEl.focus(function()
            {        
                if(thisEl.val() == thisEl.attr("alt")) 
                {
                    thisEl.val("");
                    thisEl.removeAttr("type");
                    thisEl.attr('type','password');
                    thisEl.css({'color': '#18A505','font-size': '10pt','font-weight':'normal'});
                }

        });

        thisEl.focusout(function()
        {        
            if('' === thisEl.val()) 
            {
                thisEl.val(thisEl.attr("alt"));
                thisEl.removeAttr("type");
                thisEl.attr('type','text');
                thisEl.css({'font-weight':'normal','font-size':'10pt','color':'#999','font-family': '"lucida grande", tahoma, verdana, arial, sans-serif'});
            }
        });
    }
}



$("input[type='password']").each(function(){
        setupPasswordPlaceholder($(this));
});
</code></pre>

<p>​</p>
