Inline helptext med jQuery

Screenshot af hjælpetekst fra et projekt

Designere finder på skøre tiltag. En velkendt idé er at placere hjælpetekster inde i de input felter som der skal indtastes i. Design har det med at udfordre de tekniske grænser når det kommer til frontend arbejde, og her er det ingen undtagelse.

For at benytte hjælpetekster kræves det at man sammenligner indtastningen med den gamle hjælpetekst, fjerner hjælpeteksten når folk vil taste og viser den igen hvis intet tastede. Når form-tagget submittes skal de “tomme” felter med hjælpetekst så nulstilles, så hjælpeteksten ikke medgår som en indtastning.

En nem måde at løse dette på er at benytte baggrundsbilleder og noget CSS. Desværre fungerer dette ikke i IE6 og kræver at der laves en række billeder med en passende font. En løsning med at angive hjælpeteksterne med almindelig tekst ville være gennemskuelig og lettere at sprogversionere.

Jeg havde brug for en måde at angive hjælpetekster dynamisk, og uden at modificere input-elementerne. Dertil udviklede jeg derfor et mindre jQuery plugin, som andre muligvis kan finde nyttigt. Plugin’et arbejder på name-attributten, og fungerer med tekst-baserede elementer, dvs. <input type=”text”/> og <textarea/>. Felter med hjælpetekster i kan styles ved brug af .fieldHelp klassen. Eksempelvis: textarea.fieldHelp { color: #ccc; }.

Kodeeksempel, HTML:

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript" src="jquery.helptext.js"></script>

<form method="post" action="." id="createform">
    <input type="text" name="first_name" />
    <input type="text" name="last_name" />
    <input type="submit" />
    <!-- (...) -->
</form>

<script type="text/javascript">
    $("#createform").helptexts({
        first_name: 'Dit fornavn',
        last_name: 'Dit efternavn'
    });
</script>

Download jQuery Helptext plugin