如何在Internet Explorer中使用html子元素在contenteditable div中获取插入位置 [英] How to get caret position within contenteditable div with html child elements in Internet Explorer

问题描述

我正在使用一个可信的div，它可以选择在文本流中添加内联html元素，例如标记< p>< font>< br>
。

I am working with a contenteditable div that will have the option to have inline html elements such as tags " <p> <font> <br> " in the text flow.

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

At certain points I need to grab the caret position(cursor position) of contenteditable div, the caret(cursor) is after an html child element.

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

i am using following code in javascript for Firefox it works correctly to find caret position(cursor position) of contenteditable div, but i does not find any solution for Internet Explorer to find caret position (cursor position) as window.getSelection is undefined.

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的插入位置（光标位置）对我有用。

i found that document.selection; works on Internet Expolrer but i don't think it will work for me to find caret position(cursor position) of contenteditable div.

任何人都可以我的任何工作。

can any one have any work around for me.

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

in below example my cursor position is at between 't' and 'w' in <p>two</p> <div contenteditable="true"><p>one<br><b>t|wo</b></p></div> i suppose to need number 14 in above example as i need to perform some operation at that point i am using this contenteditable div as RichTextbox with my custom style apply to it

推荐答案

您好我找到了Internet Explorer 8或更低版本的答案

Hi i found answer for internet explorer version 8 or below

       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

above code solve my problem to find current cursor position for IE8 or below version as window.getSelection() is undifined for IE8 or below and works fine with IE9

所以可以使用 document.selection 一个选择对象和范围对象以获取当前插入符号或光标位置表单 contenteditable div 或其他控件

so one can use document.selection a selection object and range object to get current caret or cursor position form contenteditable div or other control

我希望这会帮助

这篇关于如何在Internet Explorer中使用html子元素在contenteditable div中获取插入位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！