V tomto tutorialu se naučíš, jak reagovat na změny vstupních prvků webových formulářů pomocí JavaScriptu. Je důležité používat vhodné manipulátory událostí pro optimalizaci uživatelské zkušenosti a zajistit, že získáš správné hodnoty pro další zpracování. Konkrétně se zaměříme na události onchange a oninput, abychom zajistili dynamické a efektivní zpracování vašeho vstupu.
Nejdůležitější poznatky
- Událost onchange se spustí, když uživatel opustí vstupní pole a provede změny.
- Událost oninput se spustí při každém vstupu a umožňuje přímou interakci s uživatelem.
- Hodnoty vrácené z vstupních prvků jsou původně řetězce a mohou být případně převedeny do správného datového typu (např. pomocí parseFloat nebo valueAsNumber).
Krok za krokem návod
K demonstraci uvedených konceptů projdeme různými kroky, jak registrovat události v poli pro vstup a pracovat s daty.
Krok 1: Nastavení vstupního prvku
Nejprve musíte vytvořit jednoduchý vstupní prvek čísla ve svém HTML souboru. Strukturovat své HTML s vstupním polem pro zadání věku.
Krok 2: Přidání a testování události onchange
Nyní přidáme manipulátor událostí pro událost onchange. Uděláme to vytvořením funkce, která bude zavolána, když uživatel opustí vstupní prvek.
Důležité je, že při změně hodnoty můžeme přímo přistupovat k zadaným datům vstupního prvku.
Krok 3: Zpracování vstupní hodnoty
V rámci této funkce můžete získat hodnotu vstupního prvku pomocí objektu události. Přístup k hodnotě by měl být proveden pomocí event.target.value, abyste získali aktuální hodnotu přímo.
Mohou nastat situace, kdy chceme zadanou hodnotu zveřejnit nebo zpracovat, ale nejprve ji musíme ověřit? Zde jsou důležité různé typy hodnot, zejména pokud chcete provádět numerické výpočty.
Krok 4: Kontrola typu hodnoty
Jak jste si možná všimli, vstupní prvek vrací hodnotu vždy jako řetězec. Pro zajištění získání čísla můžeme použít konverzi typu. Můžete použít parseFloat k ověření, že pracujete s vhodným datovým typem.
Krok 5: Implementace události oninput
Pokud potřebujete dynamickou reakci, když uživatel něco zadává, měli byste použít metodu oninput jako doplnění k onchange. To znamená, že pokud uživatel stiskne klávesu nebo změní hodnotu, funkce bude volána přímo.
Krok 6: Porovnání obou událostí
Pozorujte rozdíly mezi oninput a onchange. oninput je spuštěn po každém zadání, zatímco onchange je spuštěn pouze tehdy, když uživatel opustí políčko pro zadání. To je zvláště užitečné, pokud se požaduje zpětná vazba v reálném čase.
Krok 7: Práce s různými typy vstupů
Metody používané pro vstupní pole typu number platí také pro jiné typy, jako jsou text nebo barva. Pokud použijete pole pro výběr barvy, rychle si uvědomíte, že použití událostí by mělo být přizpůsobeno typu.
Shrnutí
V tomto návodu jste se naučili, jak používat JavaScript k reakci na uživatelské interakce v polích pro zadání. Naučili jste se, jak onchange a oninput fungují, a jak je důležité správně zpracovat vstupní hodnoty v závislosti na typu.
Často kladené dotazy
Jaké události mohu použít pro prvky input?Můžete použít onchange, oninput, stejně jako další události jako onclick nebo specifické události klávesnice.
Jak získám aktuální hodnotu prvku input?Použijte event.target.value k získání aktuální hodnoty.
Kdy je spuštěna událost onchange?Událost onchange je spuštěna, když uživatel odstraní fokus z pole pro zadání a provede změny.
Jak zajistím, že hodnota bude interpretována jako číslo?Můžete použít parseFloat() nebo valueAsNumber k převodu řetězce na číslo.
Existují rozdíly mezi oninput a onchange?Ano, oninput je volán při každé změně hodnoty, zatímco onchange je spuštěn pouze tehdy, když se fokus pole pro zadání opustí.
