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.