A kezdő form és záró form jelölőelemmel kijelölt objektumban, azaz területen, egy vagy több űrlapelem is elhelyezhető.

Ezek az űrlapelemek vagy adatbeviteli és adat megjelenítő elemek nem mások, mint az űrlap adatmezői.

• Szövegmezők
• Elküldő és törlő gombok
• Választógombok
• Jelölőnégyzetek
• Lenyíló listák

---

Az űrlapon lévő szöveg kezelése, JavaScriptből

Az űrlapoknak, kettő szöveges területük van
- A text, melyet az input elemben alkalmazunk
- A textarea, melyet különállóként alkalmazzuk

A text és a textarea objektumok tagfüggvényei:

• focus ( ) : Ha a kurzort, a szövegmező ablakába helyezik (Függőleges villogó vonal)
• blur ( ) : Ha a kurzort, a szövegmező ablakából eltávolítják.
• select ( ) : Kijelöli a szövegmező ablakában lévő, teljes beírt szöveget. ( Ugyan úgy, mint amikor az egérrel kijelöljük teljes szövegrészt.)

A text input jelölőelemében és a textarea jelölőelemben eseménykezelőt is elhelyezhetünk:

onFocus: Bekövetkezése, ha a kurzor a szövegmezőben van, azaz a szövegmezőre kattintottunk

onBlur: Bekövetkezése, ha a kurzor a szövegmezőt elhagyja.

onChange: Bekövetkezése, ha a felhasználó, módosítja az ablak szövegét, vagy a kurzort arrább mozgatja.

onSelect: Bekövetkezése, ha a felhasználó kijelöli a szöveget vagy annak egy részét. (Ha az adott szöveget JavaScriptből mi jelöltük ki előre a selekt() tagfüggvény segítségével, akkor az esemény nem következik be.)

---

Példa az input és textarea jelölőelemekben elhelyezett onChange eseménykezelőre :
Ahhoz, hogy tesztelhessük mi is történik két dolgot tehetünk:
- Kattintsunk a megjelenő szövegablakba, hogy megjelenjen a villogó kurzor, majd a kurzort mozgassuk el a szóközbillentyűvel. Ezt követően a monitor tetszőleges területére kattintsunk.
- Írjunk valamit a megjelenő szövegablakba, majd a monitor tetszőleges helyén kattintsunk.

Szövegablak (text) input megírása:
<input type="text" name="szo" id="szo" onChange="window.alert('Az input szövegablak tartalmát módosítottad! ');">

Az input szövegablak megjelenése, melyben elvégezhetjük a tesztet:
Teszt ablak =

Szövegablak (textarea) megírása:
<textarea name="szovegablak1" rows="3" cols="80" onChange="window.alert('A textarea szövegablak tartalmát módosítottad! ');"> </textarea>

A textarea szövegablak megjelenése, melyben elvégezhetjük a tesztet.
Írjunk be valamit, majd kattintsunk az ablakon kívül:

---

A következő példákban, csak az input ablaka
kerül bemutatásra.
De a textarea ablakra is érvényesek.

Megjegyzés:
Az 1. Példánál window.alert ablakot, nem minden böngésző kezeli úgy, ahogyan azt elvárjuk.
A 2. Példát, minden böngészőnél alkalmazhatjuk.

1. Példa onFocus:
<input type="text" name="szoveg" id="szoveg" onFocus="window.alert('A szövegablakba kattintottál! ');">

2. Példa onFocus és onBlur:
<input type="text" name="xszoveg" id="xszoveg" onFocus="FocusFunction();" onBlur="BlurFunction();">

<script type="text/javascript">
        id=document.getElementById('xszoveg');
    function FocusFunction(){ id.style.backgroundColor="yellow"; }
    function BlurFunction(){ id.style.backgroundColor="white"; }
</script>

Teszteléshez, kattintsunk a szövegablakba, majd ablakon kívül.

onFocus / onBlur: Teszt szövegablak:

---

<input type="text" name="szoveg1" id="szoveg1" onBlur="window.alert('Elhagytad a szövegablakot! Ellenőrizd a beírt adatot!');">

Teszteléshez:
- kattintsunk a szövegablakba, majd ezt követően kattintsunk tetszőleges helyen, de az ablakon kívül.
-Írjunk valamit az ablakba, majd ezt követően kattintsunk tetszőleges helyen, de az ablakon kívül.

onBlur Teszt szövegablak:

---

<input type="text" name="szoveg2" id="szoveg2" value="Teszt szövegrész!" onSelect="window.alert('Ablak szövegét vagy egy részét kijelölted! Másolás = Ctrl+c');">

Teszteléshez:
- Jelöljük ki az ablakban látható szöveget, balos egérgomb lenyomva tartása mellett, mozgassuk az egeret végig a szövegen

onSelect Teszt szövegablak:

---

<input type="text" name="adat" id="adat" value="Teszt szövege!" onChange="window.alert('Az input szövegablak tartalmát módosítottad! ');">

Teszteléshez:
- Változtassuk meg, az ablakban látható szöveget, majd kattintsunk az ablakon kívűl.

onChange Teszt szövegablak:

---

Vissza a lap elejére