Textarea/input caret position

Manual testing ground

Click anywhere in the text to see a red vertical line – a 1-pixel-thick div that should be positioned exactly at the location of the caret. Once you click in the <textarea>, the debugging div used by the library to calculate the caret position will be displayed.

The test areas look unusual due to CSS properties purposefully chose to stress-test the position calculation algorithm.

<input type="text">

<input> manual tests

  1. Type text longer than the input, select with the mouse from right to left to cause scrolling left, then click in the input. (#40)

<textarea>

<textarea> manual tests

  1. Place the cursor before the "T" in "Then" then press arrow down. Fails in Chrome 58, Firefox 53. (#9)
  2. Place the cursor before "2." and press left arrow. Fails in Firefox 53, works in Chrome. (#24)
  3. Place the cursor at the beginning of line "3." then press End. Fails in Chrome 58, Firefox 53. (#9)
  4. Click at the end of lines with spaces (e.g. "3." or the line before "2."). Fails in Chrome 58, Firefox 53. (#9)