查找元素内的插入符号位置

【问题标题】：Find caret position inside element查找元素内的插入符号位置
【发布时间】：2012-09-15 06:26:39
【问题描述】：

我在 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>

【问题讨论】：

标签： html range selection contenteditable getcaretpos

【解决方案1】：

对于span只有一个子节点是文本节点的问题，可以如下检查插入符是否在其末尾：

演示：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

【讨论】：