this.type='password' doesn't work in IE, but all other browsers it does

Question

I have an input field that is by default set to type="text" so that the word Password can be displayed in it. I have the following to change it to a password field when the user selects it, which works fine in any browser I have tried except Internet Explorer.

onfocus="this.type='password';"

How would I go about making this work in IE?

Answer 1

IE does not like to change the type of an element dynamically, one solution might be to replace the element entirely. However I would suggest you just use a input type password so any non js users would still get the same functionality and live without the watermark.

Answer 2

What effect are you trying to achieve? Do you want the initial password to be visible, but when they go to enter a new one, it's obscured? If so, you might want to simply replace the element with a password input, copying the value.

Answer 3

You are better off using a <label> with the text "password" rather than displaying it inside the control itself. You can make the label appear like it is inside the textbox using css. A List Apart has a good article on this sort of thing: http://www.alistapart.com/articles/makingcompactformsmoreaccessible/