Auto focus input mezőn


Weblapkészítés során ha egy olyan oldalt kell készíteni, hol egy vagy akár több input mező is van (regisztráció, kapcsolatfelvétel stb..), hasznos lehet megadni, hogy mely mezőben villogjon alapértelmezetten a kurzor. Bár a hasznos szó talán nem is a legjobb kifejezés erre, sokkal inkább arról van szó, hogy a látogatók számára kényelmesebb, ha a lap betöltődése után az egérrel nem kell keresni és kattintani, hogy vajon hol is kellene kezdeni a gépelést, hanem egyből ott villog a kurzor ahol kell és neki nincs más dolga, csak elkezdeni kitölteni az adatokat.

A megoldást az alábbi kódrészletben meg lehet nézni. Egyeltalán nem bonyolult, mindössze a body-ban lévő onload eseményre kell figyelni, melyben elsőként megadtam a form nevét (adatok), majd a form-on belül annak az input elemnek a nevét, melyben azt akartam, hogy automatikusan megjelenjen a kurzor a lap betöltődése után (mailcim).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title>auto focus - input</title>
</head>
<body onload="JavaScript: document.adatok.mailcim.focus()">
   <form name="adatok" method="get" action="adatok.php" id="adathalmaz">
      <strong>adatok</strong><br />
      <input type="text" name="nev" size="40" /><br />
      <input type="text" name="mailcim" size="40" /><br />
      <input type="text" name="varos" size="40" /><br />
      <input type="text" name="orszag" size="40" /><br />
      <input type="text" name="kedvencszin" size="40" /><br />
      <input type="submit" value="mentés" /><br />
   </form>
</body>
</html>
Kapcsolódó bejegyzések:
  • Felmerült egy kérdésként, hogy lehetne egy login oldal tartalmánál (belépési név és jelszót kell megadni) jelezni a felhasználók számára azt, hogy melyik mező mi …

  • Valid XHTML transitional doctype, Valid XHTML transitional sablon Az alábbi kódot amolyan segítség leginkább magamnak, hogy ne kelljen mindig megírnom az alapok …

  • Ha olyasmi formázást szeretnél, melyek általában könyvekben lehet látni (tartalomjegyzék), akkor az alábbi kódot használd:tartalomjegyzék mintaol …

  • Van egy régebbi tutorial (“Tartalom váltása a lap újratöltése nélkül II. – HTMLHttpRequest”), amit szerettem volna használni egy adminisztrációs felületen. Remek …

  • Néha jól jön, hogy egy lapon egyes tartalmakat alapértelmezetten el lehet rejteni a szemek elől (helyspórolás, átláthatóság stb..), persze nem véglegesen, csak á …

A cikket beküldte: Harder (http://blog.harder.hu)

1 hozzászólás

  1. Sevoir says:

    Ha több oldalon vannak formok és más-más mezőt szeretnél aktívvá tenni,
    akkor a form betöltése után illeszd be a megfelelő inputmezőre hivatkozva:

    3
    4
    5
    
    echo "\n";
    echo "document.formnev.inputmezonev.focus();\n";
    echo "";

Szólj hozzá
a Auto focus input mezőn c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>