Question

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 input[type=”password”] to input[type=”text”] to show the placeholder and if the user click the text box i am again changing the input[type=”text”] to input[type=”password”]. Here it is not working please check script

My jsfiddle is here

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

​

Answer 1

A simple code change for you might work in most browsers (other than IE6 ofcourse). You are using removeAttr and then setting the attr for property ‘type’, instead use this single line:

replace:

  thisEl.removeAttr("type");
  thisEl.attr('type','text');

with:

  thisEl.get(0).type = type;

See your updated fiddle http://jsfiddle.net/9HagB/7/