[I originally posted this on the jquery forum, but I realize that I’ll
have to figure out the right syntax for form_for anyway, so it makes
sense to cross-post here…]
that behave as follows:
vanishes on focus. The JQuery infield plugin by Doug Neiner
(http://fuelyourcoding.com/scripts/infield/) is a good example of this.
and not cleverly repositioned on the inside where it looks terrible.
(Perhaps that’s just a matter of different CSS styling?)
Pointers welcome TIA.
There’s a great article on AListApart about this, from a few years
back. Has a great Kevin Cornell illustration, too.
Basically, you want to make your page in (rendered) HTML precisely the
way non-scripted clients will see it. Then, when you load the page in
a scripted browser, you do all the following changes in the DOM to
presenting a page that a person (or bot) cannot enjoy.
In a nutshell, you rewrite the DOM to wrap each empty input field with
a DIV position:relative, and move the label inside that DIV as a
position:absolute child with sufficient z-index to appear above the
input. Any non-empty fields get the same structural change, but their
labels are hidden at page load so they don’t cover the filled input.
Next, you observe a click on the label to hide the label itself (and
the natural browser behavior will bubble through to focus the input).
Finally, you observe a blur on the input, and if the value is
different than the default (nothing) you restore the label. Otherwise,
it just remains hidden.