FieldHints: A simple way to add grey “hint” text to HTML form fields

You know those grey “hints”, or example entries, that web form fields sometimes have in them? The ones that disappear when you click into the field? I have written a JavaScript library to add those to your forms with just one line of HTML.

Check it out.

Comments

  1. Avlok Koohli:

    Great work! Thanks :-)

  2. Kathie:

    Hi,

    This works fine for my file in IE 6, but the hint text isn’t showing up in Firefox 2, but when I’m viewing this page of yours in Firefox, I see the hint text ok.

    What am I missing?

    Thanks,
    ~kathie

  3. Kathie:

    I figured it out. I had to use the attribute “id” for the input field name. I kept the “name” attribute as well. Hope that doesn’t cause any problems.

  4. Kathie:

    A strange phenomenon: I changed the formatting of the fieldWithHint class to be bolded and italicized. In IE, I get the behavior expected (although it does adjust the width of the field), but in FF, the hint text that shows up remains to be silver. How can that be? Whatever changes I make to the class does not take affect at all in FF.

    I see in fieldhints.js this chunk:
    ******************************************
    // need a separate if here because firefox sets the field text
    // to the previously entered value if page is reloaded
    if (this.value == hint) {
    $(this).addClassName(FieldHints.fieldWithHintClass)
    }
    if (this.fieldHintsOldBlurHandler) this.fieldHintsOldBlurHandler()
    ******************************************

    I don’t know if that has anything to do with anything, but since it mentions FF…

    Thanks,
    ~kathie

  5. Kathie:

    Sigh…never mind again! It’s the cache that kept the formatting the same in FF. Once I cleared the cache in FF, the new formatting came up fine. Thanks!

Leave a comment