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>
Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

1 hozzászólás

  1. 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 "";

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét