在元素內部查找插入符號位置

我在contenteditable div內有一個span，我需要弄清楚光標是否位於span標籤的最後一個位置。我查看了選擇和範圍解決方案，但無法找出實現這一目標的簡單方法。在元素內部查找插入符號位置

<html> 
    <script> 
     var selection = window.getSelection(); 
     var range = selection.getRangeAt(0); 
     //this is what I am trying to achive 
     var selection_target = range.selectNodeContents(document.getElementById('target')); 
     var length = selection_target.toString().length; 

    </script> 
    <body> 
      <div id='target' contenteditable='true'> 
      <span>some text(figure cursor position here)</span> 
      </div> 
     </body> 
</html>

來源

2012-09-23 Ohad Sadan

對於這個問題，其中的跨度只有一個孩子是一個文本節點的情況下，你可以在它的結束檢查插入符是否如下：

演示：http://jsfiddle.net/Wm5Hz/

代碼：

var span = document.getElementById("target").getElementsByTagName("span")[0]; 
var spanTextNode = span.lastChild; 
var sel = window.getSelection(); 
var isCaretAtEndOfSpan = (sel.isCollapsed 
    && sel.focusNode == spanTextNode 
    && sel.focusOffset == spanTextNode.data.length);

事情在一般情況下稍微更復雜：相同的視覺位置可以被以不同的方式（例如後所表示文本節點中的最後一個字符，文本節點本身之後，跨度結束後），以及如果跨度可能包含元素，則您需要查找跨度內的最後一個文本節點，並將其與選擇進行比較。另外，這些都不適用於IE < 9，它具有完全不同的API。

來源

2012-09-25 09:10:32

在元素內部查找插入符號位置

回答

相關問題