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, 9 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…

Dicey Wave Bot updated

Dicey Wave Bot has been updated to utilize Google Wave API v2. No changes to the way it works.

Any suggestions for changes or new features?

Dicey Wave Bot

As any good geek would, when faced with something cool and new that also has a published API, I thought I’d see if I can write a quick dirty Google Wave Bot.

The purpose of this bot is to automate dice rolls for role playing games. It supports the typical 4d6+1 format, where 4 is the number of dice to roll, 6 is the number of sides each die has and 1 is the modifier to add to the total. It also supports multiple rolls, so you might do: 3d3+1 – 2d2, and it would return the individual rolls and the total of the 2 rolls.

You include it into your own wave by inviting diceywavebot@appspot.com

If you get some good use out of this bot, I’d love to hear about it. Also, let me know if you run into any bugs or have suggestions on making the bot better.