Can you get the exact position of a click in a string with Javascript?

Question

I have this html: <span>some words here</span>. When that span is clicked it turns into a textbox with that string in it. Is there a way to find out which character the click occurred at and put the cursor at that point in the string once the textbox with the string appears?

Answer 1

Here's a quick Fiddle (tested in Chrome) that works for a <span> that includes line breaks, which the above solution choked on:

http://jsfiddle.net/x2dLW/1/

Summarized below:

function swapArea(baseEl) {
  // Display <textarea> element, hide the <span>
}

function getCursorLoc (nodes, range) {
  var prevChars = 0;
  var clickContent = range.startContainer.textContent;
  var clickLine;

  //iterate backwards through nodes constituting <span> element contents
  for (x = nodes.length - 1; x >= 0; x--) {
    node = nodes[x];

    if (clickContent == node.textContent) {
      clickLine = node; //this is the line user clicked in
    }
    else if (clickLine && (node.nodeName == "#text") ) {
      //sum up length of text lines prior, +1 for the NewLine
      prevChars += node.textContent.length + 1;
    }
  }

  //return offset in line clicked + sum length of all previous lines' content
  return range.startOffset + prevChars;
}

function replaceAndSet(e) {
    //Capture the click target as Selection(), convert to Range();
    var userRange = window.getSelection().getRangeAt();

    newArea = swapArea(source);

    //spanLines holds siblings (nodeName #Text or <BR>) constituting <span> contents
    var spanLines = userRange.startContainer.parentElement.childNodes;
    var clickChar = getCursorLoc(spanLines, userRange);

    newArea.focus();
    newArea.setSelectionRange(clickChar, clickChar);    
}

var source = someSpan; //the span user clicks on
source.onclick = replaceAndSet;