INPUT FIELDS: Cursor Position Control Example

Click in the following input box, scroll with the arrow keys and watch. Use Home, End and Arrows keys or the mouse to change the cursor position. To test "selection" use the mouse or the SHIFT/CTRL key in combination with the above keys to select part of the text or jump between words in it.

A nice effect with two INPUT boxes showing "beforeCaret" and "afterCaret" parts.

The same effect obtained using two DIVs, text scrolls as you move the cursor.


The informations we can lookup by using the "selectionStart", "selectionEnd" and other element properties.

Caret Position
Max Length
Text Length
Avail Length
Before Caret
After Caret
Selected Text