Petar Strinic

and all those sorts of things…

As a followup to my previous article on this same topic, I thought I’d touch on the HTML5 “half solution” to the same problem.

HTML5, along with many other neat features, offers us the placeholder attribute.

This is enough for WebKit based browser and Firefox 4.0

Unfortunately it’s not widely supported at the moment and a fallback is required. You can use a method like this to detect whether the placeholder tag is supported.

So, to support Firefox pre-4.0, IE, etc. you might end up implementing something like what I was suggesting in my previous article. Oops.

Share

April 11th, 2011

Posted In: Projects

Tags: , , ,

Leave a Comment

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:

Login Box

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

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…

Share

July 27th, 2010

Posted In: Projects

Tags: , , , , , ,

Leave a Comment