Mapping the event position to the text position in non text-fields

Question

Is there a way to map an event such as a click-event on this element

<div>Just normal text</div>

to the position in the contained text ( "You just clicked the 6th character", when hitting the 'n' )?

Answer 1

I don't know any pretty way of achieving that but I got a solution that would work, although it's ugly.

You could wrap each letter of your div text in a lets say span element and add unique identifiers for each letter. Then you'd hook up event handlers for those span elements, not the whole div and based on the span id you could tell which character was that.

This whole thing can be done in JS but as I said that's not the ideal solution for sure.

Here's the example (I've added a test id to the div so I could find it easier).

var letters = $('#test').text();
var spans = '';
for (var i = 0; i < letters.length; i++) {
    spans += '<span id="id' + i + '">' + letters[i] + '<span>';
}
$('#test').html(spans);

$('span[id^=id]').click(function() {
    alert('Clicked char: ' + (Number($(this).attr('id').substring(2)) + 1));
    return false;
});

You can also give it a try on my demo.

Answer 2

Not as such; I guess you would have to split each character into a <span> element, either on server side or using JQuery.

Answer 3

Here's a hacky way that could possibly be made to work: it involves temporarily making the document editable and examining the selection. It should work in Firefox 3+, IE 6+, recent Safari and Chrome.

As it stands, there are some problems I can see:

• The results in IE are different to other browsers: IE counts all characters in the whole containing element up until the caret while other browsers give an offset within the containing text node, but you could work round this;
• A border appears round the current element in some browsers
• Doesn't work in Opera or Firefox 2, and leaves document editable
• Possibility of other UI glitches: it's a nasty hack.

Code:

window.onload = function() {
    var mouseDownEl;

    document.onmousedown = function(evt) {
        evt = evt || window.event;
        var el = evt.target || evt.srcElement;
        if (evt.srcElement || !("contentEditable" in el)) {
            document.designMode = "on";
        } else {
            el.contentEditable = "true";
        }

        mouseDownEl = el;
    };

    document.onclick = function(evt) {
        evt = evt || window.event;
        var el = evt.target || evt.srcElement;
        if (el == mouseDownEl) {
            window.setTimeout(function() {
                var caretPos, range;
                if (typeof window.getSelection != "undefined") {
                    caretPos = window.getSelection().focusOffset;
                } else if (document.selection && document.selection.createRange) {
                    range = document.body.createTextRange();
                    range.moveToElementText(el);
                    range.collapse();
                    range.setEndPoint("EndToEnd", document.selection.createRange());
                    caretPos = range.text.length;
                }

                if (el.contentEditable == "true") {
                    el.contentEditable = "false";
                } else {
                    document.designMode = "off";
                }
                alert(caretPos);
            }, 1);
        } else {
            if (mouseDownEl.contentEditable == "true") {
                mouseDownEl.contentEditable = "false";
            } else {
                document.designMode = "off";
            }
        }
        mouseDownEl = null;
    };
};