jQuery plugins - In-Field Labels
júl 09

In-Field Labels

Egy elegáns megoldás űrlapokhoz

Verzió: 0.1
Kiadás dátuma: 2009
Fejlesztő: Doug Neiner
Liszensz: MIT, GPL

Bevezető

Napjainkban az űrlapoknál divatos lett az ún. "in-field labels" megoldás alkalmazása. Ez röviden annyit jelent, hogy a hagyományos label - input mező páros helyett már csak input mező van (legalábbis látszatra), ami egyúttal betölti a label szerepét is: az input mező kezdőértékként a label szövegét tartalmazza, majd bele klikkelve eltűnik.

De mindez élő példával jobban szemléltethető:

Igazából az In-field labels plugin funkciójában ennél nem nyújt többet, de viszont látványban mindenképp: amikor az adott beviteli elemre kerül a fókusz, akkor a label elhalványodik, ha pedig aktívvá válik (bele klikkelünk), akkor törlődik a label. Ki nem töltött mező esetén természetesen a label ismét láthatóvá válik.

Külön megemlíteném, hogy a plugin beágyazása roppant egyszerű/kényelmes, mivel mindössze egyetlen jQuery sor szükséges hozzá! Így bármely, már korábban létrehozott (feltételezhetően valid) oldalunkba néhány pillanat alatt képesek vagyunk a plugin-t beágyazni, maximum a kinézet testreszabása vehet egy picit több időt igénybe.

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="css/infieldlabel.css" />
          

Mivel az esetek nagy hányadában az oldalakon nem a sablonos űrlap elemeket használjuk, hanem az adott oldal design-jához igazított, módosított elemeket, így a CSS-ben is ezekhez kell igazítanunk a plugin megjelenését.

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.infieldlabel.min.js"></script>
          

Deklaráció

Alapbeállításokkal:

            $(document).ready(function(){
              $('label').inFieldLabels();
            });
          

Használat

Az űrlap elemeket teljesen úgy kell megadni, mint normális esetben, lehetőleg egy <p> vagy egy <div> elembe ágyazva (a deklarációt követően a plugin automatikusan érvényes lesz minden label tag-re):

            <p>
              <label for="inputField">Label szöveg</label>
              <input type="text" id="inputField" name="inputField" value="" />
            </p>
          

Tippek

  • Problémát jelenthet a böngészők "automatikus kiegészítés" funkciója, amely a mezőt előre kitölti, mégpedig a change esemény meghívása nélkül. Ezt természetesen a plugin nem képes észlelni, így hibás működést vonz maga után.
    Erre jelent megoldást, ha a az input elemünket kiegészítjük a következő attribútummal: autocomplete='off'
    (a funkció csak Firefox és Safari böngészők alatt jelent megoldást!)