Question

I am trying to implement a simple trick which would hide span/label inside textbox when user starts entering text in respective textbox, and show it, on blur if textbox is empty.

(It is implemented on user sign in form)
This thing is working okay so far and here is the demo

But it fails in following scenario:

1) If user enters username, previously entered username list (the form data stored by browser when auto-complete is turned off) appears. And if user selects username with mouse-click from the list, password field gets auto-populated. Now though password field has value in it, it won’t hide the span.
(keydown/focus/click/change event over textbox not helping in this case)

2) When the username/password is wrong, page reloads, username textbox has last entered value. But still the span over it is being displayed.
(I tried to check if username textbox is empty on pageload. It didn’t work)

Can anyone help me fix these things?

Thanks in advance… 🙂

Answer 1

What you need i s a placholder. Placeholder have been standardized by html5
and can be easily implemented via various jquery plugin (here is one).

i suggest you use those solutions, as they are standards. the ideal solution is to use html5 and than fallback to javascript for older browsers.

Look ath this form where i implemented placholders: http://www.consiglio.regione.lombardia.it/web/crl/BancheDati/atti_si

When you insert a letter in an input field, the text disappears. It’s done with the help of that plugin.