I’ve already asked question similar to this some time ago, I thought I solved my problem but now it appears I didn’t. Dealing with this problem for some time now and I have absolutely no idea how to do it.
The answer I got from previous question works but when I resize the window the password label drifts away when you re-size the window. And it doesn’t position all the same in the FF(3.0.5) but it does in FF(3.5.6) and IE7, but again all have the same problems when window is re-sized.
What I’m trying to do is to put label behind input and by doing so it appears that input has ‘Password’ value. Does anybody know how did the facebook solve that problem?
http://www.facebook.com look at the login form, the password field .. when you click on it the password disappears and you type your password in.
Another useful link I got for this is http://dorward.me.uk/tmp/label-work/example.html from David Dorward, but he uses jquery and I’m allowed to use either only prototype or pure javascript. Can I get any help/comments/hints/tricks I’ve been dealing with this for some time now I’m just out of ideas.
Thank you
Consider using CSS background images for this. Create two (transparent) background images with the desired text and define it in a class. Display it by default on empty fields. Use the JS
focusevent to remove the class associated with the image and use the JSblurevent to check if there is no value and add the class associated with the image.