你可以得到一個字符串中使用Javascript的確切位置嗎？

Question

我有這個html：<span>some words here</span>。當點擊span時，它會變成一個帶有該字符串的文本框。有沒有辦法找出發生點擊的是哪個字符，並且一旦出現帶有字符串的文本框，就將光標放在字符串中的那個點上？

Answer 1

這裏有一個快速小提琴（在Chrome測試），對於<span>包括換行符，其中上述方案上哽咽的工作原理：

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;