Weblap Hová jutunk?

Űrlap szövegmezők kezelése 1102

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.


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:

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="szoveg1" onChange="window.alert('Az input szövegablak tartalmát módosítottad! ');">

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

    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:


    A következő példákban, csak az input szövegablaka kerül bemutatásra::

    <input type="text" name="szoveg1" onfocus="window.alert('A szövegablakba kattintottál, megjelenik a villogó kurzor! ');">

    Teszteléshez, kattintsunk a szövegablakba.

    onfocus Teszt szövegablak:


    <input type="text" name="szoveg1" onBlur="window.alert('Elhagytad a szövegablakot! Nem akarsz többet írni?');">

    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="szoveg1" value="Teszt szövegrész!" onSelect="window.alert('Az ablak szövegét akarod kijelölni? Megteheted a jobbos egérbillentyűvel!');">

    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:

     

     

     

    Vissza a lap elejére