窗口文本選擇在一個CONTENTEDITABLE一個CONTENTEDITABLE

Question

文本選擇造成我很大的問題......

我試着進入這個代碼部分以同樣的方式開始和結束的選擇點：

http://jsfiddle.net/TjXEG/1/

（因爲在CONTENTEDITABLE，有型動物標籤，我需要專注損失可見選定文本（文本節點？）

我真的失去了，經過重新選擇，有人知道一個教程或者a還沒有理解在Web瀏覽器中的選擇？

感謝， Yeppao

Answer 1

因爲我只使用Chrome，我剁掉else，因爲它並不適用。所以這裏是Chrome解決方案：

Non-editable text. Editable is below: 
<div id="test" contenteditable="true">Hello, some <b>bold</b> and <i>italic and <b>bold</b></i> text</div> 
<div id="caretPos"></div> 
<div id="caretPost"></div> 
<script type="text/javascript"> 
function getCaretCharacterOffsetWithin(element) { 
    var begin = 0; 
    var end = 0; 
    if (typeof window.getSelection != "undefined") { 
     var range = window.getSelection().getRangeAt(0); 
     var preCaretRange = range.cloneRange(); 
     preCaretRange.selectNodeContents(element); 
     preCaretRange.setEnd(range.startContainer, range.startOffset); 
     begin = preCaretRange.toString().length; 
     preCaretRange.setEnd(range.endContainer, range.endOffset); 
     end = preCaretRange.toString().length; 
    } 
    return "Selection start: " + begin + "<br>Selection end: " + end; 
} 

function showCaretPos() { 
    var el = document.getElementById("test"); 
    var caretPosEl = document.getElementById("caretPos"); 
    caretPosEl.innerHTML = getCaretCharacterOffsetWithin(el); 
} 

document.body.onkeyup = showCaretPos; 
document.body.onmouseup = showCaretPos; 
</script> 

一旦你瞭解它，邏輯非常簡單。有一個開始和結束容器。如果它是明文：它們將是相同的;但是，HTML標籤會將句子分段，並會使開始包含一部分，並且結束包含不同的部分。

如果您使用setStart()而我使用的是setEnd()並反轉參數，它將與反轉索引相同（即末尾將爲0而不是開頭）。

所以爲了取得開頭，您仍然使用setEnd()，除了啓動參數。