Moderní tvorba webových aplikací

O webu

JS událost oninput

JavaScriptová událost oninput zachytí práci s formulářovými políčky.

4 minuty

Odchytávání stavu, že uživatel něco dělá s formulářovým elementem <input> není úplně jednoduché.

Událost onchange

<input type=text>

Například událost onchange u značky <input> reaguje, až když se ztratí :focus.

<input type=range>

U <input type=range> je potom pro některé prohlížeče změna už samotné přesouvání jezdce a jinde se onchange vyvolá až při uvolnění tlačítka myši.

<select>

<input type=radio>

Události onkeyup, onkeydown, onkeypress

Pokud jsme tedy v textovém <input>u chtěli reagovat na každé napsané písmeno, bylo nutné odchytávat stisk klávesy.

onkeyup

onkeydown

onkeypress

onpaste

Problém pochopitelně nastane, když návštěvník bude chtít obsah vkládat ze schránky přes kontextové menu myší a podobně. Potom je řešení potřebnou událost spustit i při onpaste a pro případ, že se obsah přesune do pole myší ještě pro onfocus.

Událost oninput

Událost oninput, funkční od IE 9 by tuto nejednotnost měla řešit a spouštět se vždy, když se s políčkem nějak pracuje.

Kromě staré Opery 12 všechny prohlížeče vyvolají oninput jen u textového pole, <input type=range> a <textarea>.

Textové políčko

Posuvník

Textarea

Zaškrtávátko

U následujících prvků už oninput v nových prohlížečích nic nedělá.

Přepínač

V Opeře 12 je zajímavé, že se oninput vyvolá na obou <input>ech.

Roletový výběr

Související články

Detekce otevření DevTools

Jak zjistit, že se na stránce otevřely vývojářské nástroje.

13 minut

JavaScript null a undefined

Rozdíly mezi null a undefined v JavaScriptu, kdy je používat a jak se vyhnout běžným chybám.

12 minut

Sleep v JavaScriptu

Jak implementovat sleep/delay funkcionalitu v JavaScriptu pomocí Promise a async/await

6 minut

JavaScript Battery API

Jak v JS zjistit stav baterie, co dnes funguje a kdy API nepoužívat.

3 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025