首页 文章

如何在Internet Explorer中使用html子元素在contenteditable div中获取插入位置

提问于
浏览 次
4

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

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

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

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的插入位置（光标位置） .

任何人都可以为我做任何工作 .

在下面的示例我的 cursor position is at between 't' and 'w' in <p>two</p> <div contenteditable="true"><p>one<br><b>t|wo</b></p></div> 我想在上面的示例中需要数字14，因为我需要在此时执行一些操作我使用这个contenteditable div作为RichTextbox我的自定义样式适用于它

javascript internet-explorer contenteditable caret cursor-position

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或更低版本的unifined并且可以正常使用IE9

    所以可以使用 document.selection 一个 selection 对象和 range 对象来获取当前插入符或光标位置形式 contenteditable div 或其他控件

    我希望这个能帮上忙

    回复于

相关问题