4

我正在使用一个 contenteditable div，它可以选择在文本流中包含内联 html 元素，例如标签“<p> <font> <br>”。

在某些时候，我需要获取 contenteditable div 的插入符号位置（光标位置），插入符号（光标）位于 html 子元素之后。

我在 Firefox 的 javascript 中使用以下代码，它可以正常找到 contenteditable div 的插入符号位置（光标位置），但我没有找到任何解决方案让 Internet Explorer 找到window.getSelection未定义的插入符号位置（光标位置）。

function getCaretPosition() {
     if (window.getSelection && window.getSelection().getRangeAt) {
          var range = window.getSelection().getRangeAt(0);
          var selectedObj = window.getSelection();
          var rangeCount = 0;
          var childNodes = selectedObj.anchorNode.parentNode.childNodes;
          for (var i = 0; i < childNodes.length; i++) {
               if (childNodes[i] == selectedObj.anchorNode) {
                   break;
               }
               if (childNodes[i].outerHTML)
                    rangeCount += childNodes[i].outerHTML.length;
               else if (childNodes[i].nodeType == 3) {
                    rangeCount += childNodes[i].textContent.length; 
               }
          }
          return range.startOffset + rangeCount;
    }
    return -1;
}

我发现它document.selection; 可以在 Internet Expolrer 上使用，但我认为找到可内容编辑 div 的插入符号位置（光标位置）对我来说不起作用。

任何人都可以为我解决任何问题。

在下面的示例中，我的光标位置在 <p>two</p> 中的 't' 和 'w' 之间 <div contenteditable="true"><p>one<br><b>t|wo</b></p></div>我想在上面的示例中需要数字 14，因为此时我需要执行一些操作，我正在使用这个 contenteditable div作为我的自定义样式的 RichTextbox 适用于它

4

1 回答 1

4

嗨，我找到了 Internet Explorer 版本 8 或更低版本的答案

       var cursorPosition=0;    
       if (document.selection && document.selection.createRange) {
            range = document.selection.createRange();
            if (range.parentElement() == YourEditableControl) {
                var tmpEle = document.createElement("span");
                YourEditableControl.insertBefore(tmpEle, YourEditableControl.firstChild);
                var tmpRange = range.duplicate();
                tmpRange.moveToElementText(tmpEle);
                tmpRange.setEndPoint("EndToEnd", range);
                cursorPosition= tmpRange.text.length;
            }
        }

上面的代码解决了我找到 IE8 或更低版本的当前光标位置的问题，因为 window.getSelection() 对于 IE8 或更低版本是未定义的，并且适用于 IE9

因此可以使用document.selection对象selection和range对象来获取当前插入符号或光标位置表单contenteditable div或其他控件

我希望这个能帮上忙

于 2012-06-06T12:30:03.843 回答