2

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)

a busy cat

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)

a busy cat

Can anyone help me fix these things?

Thanks in advance... :)

Nirav Shah
  • 689
  • 6
  • 16
Bongs
  • 5,502
  • 4
  • 30
  • 50
  • I can't replicate any of these, and there is no indication of a 'list' of usernames. – Michael Wright Jul 08 '11 at 08:39
  • You might not be able to see it on the Demo which I provided. The list is actually form data stored by browser if autocomplete is turned off. (I'll edit the question) – Bongs Jul 08 '11 at 08:45

3 Answers3

2

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.

Matt
  • 74,352
  • 26
  • 153
  • 180
Nicola Peluchetti
  • 76,206
  • 31
  • 145
  • 192
0

It seems that you are attempting to reinvent the wheel here. Check this already answered question on what appears to be the same subject: how do I make an html text box show a hint when empty

Community
  • 1
  • 1
Adam Markowitz
  • 12,919
  • 3
  • 29
  • 21
  • lol... @Adam the answer is NO... If you check the question I put link Demo where I've already implemented the thing. But here in this case it fails in given 2 cases. And I want to get it fixed. – Bongs Jul 08 '11 at 08:51
  • The way you state your question doesn't make it sound as if it differs from a general input watermark as referenced by the url in my answer. How is what you're trying to do different? I would anticipate that using an already canned solution would benefit you so you won't have to deal with testing on multiple browsers/versions (this is always a pain when rolling your own). – Adam Markowitz Jul 08 '11 at 08:55
  • @Adam.. I am going to put screenshot, that might give you some idea. – Bongs Jul 08 '11 at 09:03
0

Usability-wise, I don't think it would be terrible to hide the watermarks of both inputs regardless of which on was clicked/keydowned etc. Now this next option is controversial, so you have been warned...

<input name="first_name" type="text" autocomplete="off">

Just wanted to make sure you were aware of that - most often used to prevent credit card fields from autocompleting. Hope something in here this helps.

ElonU Webdev
  • 2,451
  • 14
  • 15
  • For user convenience the autocomplete is ON on username field. I am going to add screenshot in a while... – Bongs Jul 08 '11 at 09:04