Umístění kursoru v poli

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