493: Undecipherable

HTML: which letter was clicked in text?

For my spare-time project TheSchreibmaschine I need to get the position of the letter in a div that was clicked.

Limitation: it is not possible to add additional childs to the div.

1
<div>This is some awesome text</div>

The solution is actually quite straight forward: just capture the mouse event and ask the document to calculate the caret-position using the mouse coordinates.

Here is the solution I adopted:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function insertBreakAtPoint(e) {

    var range;
    var textNode;
    var offset;

    if (document.caretPositionFromPoint) {    // standard
	range = document.caretPositionFromPoint(e.pageX, e.pageY);
	textNode = range.offsetNode;
	offset = range.offset;
    } else if (document.caretRangeFromPoint) {    // WebKit
	range = document.caretRangeFromPoint(e.pageX, e.pageY);
	textNode = range.startContainer;
	offset = range.startOffset;
    }
    // do whatever you wanted here!
}

There is one limitation (at least I have a small problem in Chromium) that the range.textNode must not necessarily identical to the one that was clicked: the contained text might be shorter than expected.

The reason for that remained unknown. I just did the access via range.textNode.parentElement.firstChild as in my case the div only has one child, which is the text.

For further reference the stackoverflow. Thanks to @TimDown.