get caret position relative to visible start of line

Vote count:

0

I know I can use the following line to get the offset of the caret (cursor position) relative to the current element:

offset = window.getSelection().getRangeAt(0).startOffset;

But sometimes the element will contain a lot of text, and the text will wrap. How can I find the offset relative to the nearest wrap (if any)?

For instance, given the following text which is all in one element:

<p>abcdefghjiklmnopqrstuvwxyz test</p>

Suppose it is automatically line-wrapped as follows:

abcdefghjiklmnopqrstuvwxyz
test
   ^cursor before this 't'

If the cursor is between the "s" and "t" in test, the above code will assign a value of 30 (26 characters on 1st line, plus space, plus t,e, and s.) to offset. But I want it to return 3 in this case: relative to the apparent start of the line, the cursor is only offset 3 ('t', 'e', and 's' come before the cursor.)

How can I accomplish this in plain, cross-platform javascript?

asked 43 secs ago

Michael

1,384

get caret position relative to visible start of line