javascript - Javascript を使用して、文字列内のクリックの正確な位置を取得できますか?

Question

私はこのhtmlを持っています: <span>some words here</span>. それspanをクリックすると、その文字列を含むテキストボックスに変わります。文字列を含むテキストボックスが表示されたら、クリックが発生した文字を見つけて、文字列内のそのポイントにカーソルを置く方法はありますか?

Answer 1

<span>これは、上記のソリューションが窒息した改行を含むa で機能する簡単な Fiddle (Chrome でテスト済み) です。

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

以下に要約します。

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;