Home Javascript javascript change input box type to password

javascript change input box type to password

Published on December 12, 2008 by in Javascript

Well its been quite a while since I blogged last.  I have loads of new stuff to write but will get to that later.

How to change input text field to a password type

My most recent challenge was a client did not want to use labels for his login boxes on his website.   He wanted to have Username in the username field and password in the password field.  This in itself isn't to hard.  All you do is set the field values to Username and password.  No big deal.  We all know that the password field needs to be a password field type so if you set the value of this item it is set to ******** instead of saying password


The other thing we need to do to each field is clear them.   You can do this with the following code in your input box:

You can make it an onclick or an onfocus, either should work.
Now the problem with the password field is we need to change the field type from text to password once its clicked. You can do this with the following code:


This works great with firefox, but throws an error with IE. To fix it you need to actually replace the entire input field. Its a bit tougher to do but here is the code sniplet that will work, I can not take credit for the solution as I found it on the Codeing forums

# put the script in the head of your html 

The above code will replace and re-type the input field from a text field to a password field and it will clear the value at the same time. This works for both Internet Explorer and Firefox. It was a lifesaver, hopefully someone will find it useful.

 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
© Brainstorms of a Webdev