Password box with words in it?

I was working on updating the looks of a site, last week, and the designer sent me a mockup for a login page that had the word “Password” in the password field. Something like this:

Of course this isn’t really possible with an ‘input type=”password”‘ element, and we certainly wouldn’t want the user to type in their password in plain text, so… hacking ensued.

After some messing about, rewriting, refactoring, re-rewriting, etc, I came up with this: Password Demo. It’s far from perfect, but it should get the point across.

The general premise is very very simple, show the “Password” text behind the input, when the input doesn’t have focus or any real value in it. I did this by changing its absolute position (key here is that its parent element be relatively positioned) and the real input’s z-index. To avoid issues with clicking/highlighting the “Password” text, I added an onClick event that just changes the focus to the real password input. I also decided to use a defaultvalue attribute on the input to hold the default value which is show in the fields when there are no real values. Honestly most of the code is there, just to make it all “look” reasonable.

I have tested, successfully, with the following:
WinXP: Chrome, IE8, FF3.5.5
Win7: Chrome, FF3.6, IE7/8,
OSX: Chrome, FF3.6, Safari
Linux: Chrome, FF3.6
iPhone: Safari

It does not work with: W3M

Source:

  password_demo.html (4.4 KiB, 427 hits)

In the interest of clarity, I didn’t abstract the JS functions, but either way I’m sure this can be done with less code and less CSS. Show me yours…