Ebben a tutorialban az űrlap elemek adatainak elérését, illetve az űrlap elemek tulajdonságait nézzük meg. A html DOM segítségével gyakorlatilag minden tulajdonságot elérhetünk, módosíthatunk.
Input mező tulajdonságai
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Input mező tulajdonságai</title> </head> <body> <form> <label for="pelda">Minden tulajdonságú input mező:</label> <input type="text" id="pelda" name="peldaName" value="Alapértelmezett érték" placeholder="Írj ide valamit" required maxlength="20" minlength="5" size="30" pattern="[A-Za-z]+" autofocus autocomplete="on" > </form> <script> const inputField = document.getElementById('pelda'); // Tulajdonságok kiírása a konzolra console.log('Value:', inputField.value); console.log('Type:', inputField.type); console.log('Name:', inputField.name); console.log('ID:', inputField.id); console.log('Placeholder:', inputField.placeholder); console.log('Disabled:', inputField.disabled); console.log('Readonly:', inputField.readOnly); console.log('Required:', inputField.required); console.log('MaxLength:', inputField.maxLength); console.log('MinLength:', inputField.minLength); console.log('Size:', inputField.size); console.log('Pattern:', inputField.pattern); console.log('Autofocus:', inputField.autofocus); console.log('Autocomplete:', inputField.autocomplete); // Események kezelése inputField.addEventListener('change', (event) => { console.log('Value changed to:', event.target.value); }); inputField.addEventListener('input', (event) => { console.log('Current value:', event.target.value); }); inputField.addEventListener('focus', () => { console.log('Input field is focused'); }); inputField.addEventListener('blur', () => { console.log('Input field lost focus'); }); inputField.addEventListener('keydown', (event) => { console.log('Key down:', event.key); }); </script> </body> </html> |
value: input mező aktuális értéke
type: input mező típusa (pl. text, password, email, number, range stb.)
name: input mező neve
id: input mező egyedi azonosítója
placeholder: az input mezőben megjelenő helyőrző szöveg
disabled: logikai érték, amely meghatározza, hogy az input mező le van-e tiltva
readonly: logikai érték, amely meghatározza, hogy az input mező csak olvasható-e
required: logikai érték, amely meghatározza, hogy az input mező kötelező-e
maxLength, minLength: a beírható karakterek maximális illetve minimális száma.
size: az input mező látható szélessége (karakterek száma)
pattern: reguláris kifejezés, amely meghatározza az input mezőben megadható érték formátumát
autofocus: logikai érték, amely meghatározza, hogy az input mező automatikusan fókuszt kapjon-e az oldal betöltődésekor
autocomplete: meghatározza, hogy az input mező automatikus kitöltése engedélyezett-e
multiple: logikai érték, amely meghatározza, hogy az input mező több értéket is elfogad-e (csak bizonyos típusoknál, pl. file, select)
Metódusok
focus(): az input mező fókuszba helyezése
blur(): az input mező fókuszának eltávolítása
select(): az input mezőben található szöveg kijelölése
Események
change: az input mező értékének megváltozásakor
input: az input mező értékének bármilyen változása (valós időben)
focus: az input mező fókuszba kerülésekor
blur: az input mező fókuszának elvesztésekor
keydown, keyup, keypress: billentyű események
Beviteli mező értékének kiolvasása, képek kezelése
Szövegbeviteli mező: a bevitt adatot a value tulajdonsággal érhetjük el. Magát a beviteli mezőt az id segítségével azonosítjuk ebben a példában. Meg tudjuk vizsgálni, azt is, hogy írt-e bármit a felhasználó mezőbe?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <input type="text" id="inputBox" placeholder="Írj.."> <button onclick="fgvEll();">OK</button> </form> <div id="eredmeny"></div> <script> function fgvEll(){ let ertek = document.getElementById("inputBox").value; if (ertek){ console.log(ertek); document.getElementById("eredmeny").textContent=ertek; } else{ console.log("Nem adtál meg értéket!"); } } </script> </body> </html> |
Dátum mezők: Ezek is szövegbeviteli mezők, de csak dátum formátumba lehet megadni az értéket. A bevitt érték milisecundumban értendő! Tehát ne felejtsd el átváltani!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="date" id="erkezesDatuma">Érkezési dátum<br> <input type="date" id="tavozasDatuma">Távozási dátum<br> <button onclick="fgvSzamol();">OK</button> <div id="eredmeny"></div> <script> function fgvSzamol(){ let erkezes = new Date(document.getElementById("erkezesDatuma").value); let tavozas = new Date(document.getElementById("tavozasDatuma").value); let kiir = document.getElementById("eredmeny"); if (tavozas<=erkezes){ kiir.innerText = "Hiba! A távozás értékének nagyobbnak kell lennie!"; } else{ let napokSzama = tavozas-erkezes; console.log(napokSzama); let idotartam = napokSzama / (1000*3600*24); console.log(idotartam); kiir.innerText = idotartam; } } </script> </body> </html> |
Range, csúszka. Ennél az űrlap elemnél is a value tulajdonság a fontos, ezt kell elérnünk. Egy id segítségével beazonosítjuk a csúszkát, majd kinyerjük belőle az értéket. Ebben a példában egy szövegbeviteli mezőbe írjuk ki a csúszka értékét. Ha ennek a szövegbeviteli mezőnek nincs értéke, akkor a felhasználó nem nyúlt a csúszkához.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="range" id="csuszka" name="csuszka" min="0" max="100" value="50" oninput="fgvEll();"> <input type="text" id="eredmeny" readonly> <script> function fgvEll(){ let csuszkaErteke = document.getElementById("csuszka").value; document.getElementById("eredmeny").value = csuszkaErteke; } </script> </body> </html> |
select – a legördülő menü, ami lehet fix is ha adunk neki méretet. Ebben az esetben is a value a lényeg. Select esetében lehet akár egyszerre több elemet is kiválasztani, a multiple tulajdonság megadásával.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<select id="autoMarka" size="5" multiple> <option value="">-- Válasssz! --</option> <option value="Audi">Audi</option> <option value="Dacia">Dacia</option> <option value="Kia">Kia</option> <option value="Ford">Ford</option> </select> <button onclick="fgvEll()">OK</button> <script> function fgvEll(){ /* let ertek = document.getElementById("autoMarka").value; if(ertek){ console.log(ertek); } else { console.log("Hiba!"); } */ let tomb = document.getElementById("autoMarka"); let ertekek = Array.from(tomb.selectedOptions).map(option=> option.value); console.log(ertekek); } </script> |
Képek kezelése. Tegyük fel, hogy 4db kép közül kell egyet kiválasztani! Ennek a képnek a betűjelét pedig kiíratjuk egy szövegbevtieli mezőbe. A kiválaszott képnek adjunk egy 1px vastag zöld szegélyt.
Tehát amelyik képen kattintunk, az kap egy selected nevű css osztályt, ami leírja, hogy legyen neki kerete. Minden képnek van egy onclick eseménye, ami saját magára, az adott képre hivatozik. A fgvKepValaszt(img) függvény tehát 1 paramétert kap, az adott képet, amin kattintunk.
(Tehát az img az adott képet jeleni, annak minden tulajdonságával együtt)
A fgvKepValaszt(img) összes képről leveszi a selected osztályt, majd csak a kiválsztott képhez adja hozzá.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .selected{ border: solid 1px green; } </style> </head> <body> <div> <img id="a" src="a.png" title="a" alt="a" onclick="fgvKepValaszt(this)"> <img id="b" src="b.png" title="b" alt="b" onclick="fgvKepValaszt(this)"> <img id="c" src="c.png" title="c" alt="c" onclick="fgvKepValaszt(this)"> <img id="d" src="d.png" title="d" alt="d" onclick="fgvKepValaszt(this)"> </div><br> <input type="text" id="eredmeny" readonly> <script> function fgvKepValaszt(img){ let kepek = document.querySelectorAll("img"); kepek.forEach(img => { img.classList.remove("selected"); }) ; img.classList.add("selected"); let e = document.getElementById("eredmeny"); e.value = img.id; } </script> </body> </html> <!-- Ez a lambda kifejezés távolítja el az összes képről a selected osztályt. kepek.forEach(kep => { kep.classList.remove("selected"); }); // Így néz ki "kibontva": kepek.forEach(function(kep) { kep.classList.remove("selected"); }); --> |
Több kép kiválasztása. Módosítsunk kicsit az előző feladaton, engedjük meg, hogy több képet is ki lehessen választani!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .kivalasztva { border: solid 1px green; } </style> </head> <body> <div> <img id="a" src="a.png" title="a" alt="a" onclick="fgvKepValaszt(this)"> <img id="b" src="b.png" title="b" alt="b" onclick="fgvKepValaszt(this)"> <img id="c" src="c.png" title="c" alt="c" onclick="fgvKepValaszt(this)"> <img id="d" src="d.png" title="d" alt="d" onclick="fgvKepValaszt(this)"> </div><br> <input type="text" id="eredmeny" readonly> <script> function fgvKepValaszt(img) { // Ha az elem már ki van választva, akkor eltávolítjuk a kiválasztást if (img.classList.contains("kivalasztva")) { img.classList.remove("kivalasztva"); } else { // Ellenkező esetben hozzáadjuk a kiválasztást img.classList.add("kivalasztva"); } // Összegyűjtjük az összes kiválasztott kép ID-ját let valasztottKepek = document.querySelectorAll("img.kivalasztva"); let tombKepID = []; valasztottKepek.forEach(function(kep) { tombKepID.push(kep.id); }); // Beállítjuk az input mező értékét az ID-k vesszővel elválasztott listájára let e = document.getElementById("eredmeny"); e.value = tombKepID.join(", "); } </script> </body> </html> |
checkbox Ebben az esetben is lehet egyszerre több érték kijelölve, tehát végig kell menni mindegyiken, és megvizsgálni, melyik van bepipálva. A checkboxokat jelen esetben a nevük alapján azonosítottuk, de lehetne osztály, vagy id alapján is. Az értékeiket egy tömbben fogjuk tárolni. Ha a tömb elemszáma 0, akkor nem jelölt be semmit a felhasználó.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <input type="checkbox" name="feladat" value="A">A<br> <input type="checkbox" name="feladat" value="B">B<br> <input type="checkbox" name="feladat" value="C">C<br> <input type="checkbox" name="feladat" value="D">D<br> </form> <button onclick="fgvChkBox();">OK</button> <script> function fgvChkBox(){ let checkboxes = document.getElementsByName("feladat"); let ertekekTomb = []; for(let i of checkboxes){ if(i.checked){ ertekekTomb.push(i.value); } } if (ertekekTomb.length > 0){ console.log(ertekekTomb); } else{ console.log("nincs kijelölve semmi"); } } </script> </body> </html> |
radio buttons: A rádio gombokat a nevük segítségével lehet azonosítani. Ez azért van így, mert a rádiógombok ugyanabba a csoportba tartoznak, és a name attribútum segítségével lehet biztosítani, hogy a csoportból egyszerre csak egy legyen kiválasztva. Rádio gombok esetén a checked tulajdonságot kell figyelni.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form id="myForm"> <input type="radio" id="1" name="feladat" value="1">Válasz1<br> <input type="radio" id="2" name="feladat" value="2">Válasz2<br> <input type="radio" id="3" name="feladat" value="3">Válasz3<br> <input type="radio" id="4" name="feladat" value="4">Válasz4<br> </form> <button onclick="fgvRadioGomb();">OK</button> <script> function fgvRadioGomb(){ let radiogombok = document.getElementsByName("feladat"); let valasztott; for (let i of radiogombok){ if(i.checked) { valasztott = i.value; break; } } if(valasztott){ console.log(valasztott); } else { console.log("Nincs kijelölve semmi!") } } </script> </body> </html> |