JavaScript: Get input text position (in chars) from mouse click

Question

I have an HTML <input type="text"> or <textarea> with random existing text, say [12345678] or [12345
67890]
I have an arbitrary positioning mousedown click event inside this text. I need to convert the 2D mousedown click page coordinates into 1D character-based text coordinates, so as to position the caret properly by JS. Obviously the browser has some function that is doing this conversion internally; it would be nice to call this. The input has a standard variable-width font, and could be at any level of magnification. The browser is restricted to FireFox. We have JQuery and JCursor.

Background: The input field is dynamically generated inside deeply nested boxes, each having gnarly overloading. The combination of legacy code with the newest FF implementation is somehow stealing the mousedown propagation/focus between the time it bubbles up out of the input element and the time it hits the default browser set-caret action, which is not happening. I need to set the caret myself.

Answer 1

a workaround for this example is to use the Level 2 stopPropagation() call on the event, while returning true (keep propagating) for the Level 0 onmousedown handler. This circumvents further Level 2 calls in bubbling up [into the parent structures' legacy code], while still ensuring that native default actions [placing the caret] actually do happen after the bubble-up phase. However, it still does not answer the original question, which has other applications.