Moderní tvorba webových aplikací

O webu

Umístění kursoru v poli

Jak v JavaScriptu zjistit posici, na které je kursor v textovém poli.

3 minuty

Při okamžité validaci formulářových polí se může hodit znát místo, kde je zrovna kursor.

Od IE 9 je možné zjistit aktuální místo kursoru z vlastnosti selectionStart. Zjišťovat posici má smysl hlavně při události onkeyup (po uvolnění klávesy).

<input
  onkeyup="alert(this.selectionStart)"
>

Změna umístění kursoru

Pomocí selectionStart jde i umístit kursor na vybrané místo.

input.selectionStart = 0; // začátek na 0

Následující pole bude mít po vybrání (onfocus) kursor před zavináčem:

Chrome a Edge mají problém s označením výběru při focusu.

Je možné použít onclick, ale potom je vidět poskočení kursoru z konce na začátek:

Nejlepšího výsledku napříč prohlížeči jde nejspíš dosáhnout pomocí obalení do časovače při použití onfocus:

Konec výběru selectionEnd

Kromě vlastnosti selectionStart existuje ještě selectionEnd, která znamená konec výběru. Nastavením odlišného startu a konce jde potom označit vybranou část políčka:

Výběr se začíná číslovat od nuly, takže selectionStart = 2 přesune začátek výběru za 2. znak.

Starší IE

Pro IE 8 a starší je pro stejnou funkčnost nutné použít document.selection.createRange() a metody moveStart/moveEnd.

var sel = document.selection.createRange();
sel.moveStart('character', -pole.value.length);
posice = sel.text.length;

Oba postupy potom stačí zkombinovat.

Živá ukázka

Související články

Automatické načítání firemních údajů z registru ARES

Návod na získání dat o firmě z IČO nebo DIČ pomocí veřejné API a jejich použití pro předvyplnění webových formulářů.

8 minut

HTML značka <keygen>

K čemu sloužila HTML značka <keygen>.

7 minut

Jak „focusovat“ správně díky :focus-visible

Jak správně řešit označený (:focus) stav formulářových prvků.

4 minuty

Poskakování obsahu akčních tlačítek

Jak vyřešit problém s poskakováním obsahu, když se změní textace nebo tučnost tlačítka.

9 minut

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