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

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

Stylování <input type=number>

Jak stylovat <input> pro zadávání čísel.

7 minut

Sleep v JavaScriptu

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

6 minut

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