1

There are a lot of plugins dedicated to implementing HTML5's placeholder attribute in older browsers. This is the one we're using.

While it does't use the placeholder attribute like some of the others options, it does (after our tweaks) preserve the text on focus - focusing onto an input field doesn't erase its contents.

We have one annoyance with it though - when you hit TAB and move into an input field with the default (/ empty) text, the default text first gets selected, until we fix this and position the caret at position 0 ourselves, causing a noticable flickering effect.

To reproduce, just check out the fiddle I linked to above (here it is again). Is there an easy solution to this problem (needs to work on IE9+/Firefox/Chrome)?

Community
  • 1
  • 1
ripper234
  • 222,824
  • 274
  • 634
  • 905

1 Answers1

0

Here is an alternative solution. Position a element over top that holds the default text. If the input gets focus hide the default text and on blur check to see whether you need to hide the text or not. I realize it doesn't answer the question directly, but it seems like the method now is getting a lot more complicated than necessary. One other thing about the method now is if someone tried to select any part of the default text it has a very unexpected behavior.

qw3n
  • 6,236
  • 6
  • 33
  • 62
  • There are a lot of plugins, each with different drawbacks. I think this one might be using that approach - https://github.com/steadicat/labels - but it requires a more delicate css/positioning effort to work. The text selection issue is IE only, and we can live with it. Perhaps this answer should be a comment? – ripper234 May 06 '12 at 16:48