Как получить позицию каретки в contenteditable div с дочерними элементами html в Internet Explorer

Я работаю с contenteditable div, у которого будет возможность иметь встроенные элементы html, такие как теги «‹p› ‹font› ‹br›» в текстовом потоке.

В определенные моменты мне нужно захватить позицию каретки (положение курсора) contenteditable div, каретка (курсор) находится после дочернего элемента html.

я использую следующий код в javascript для Firefox, он работает правильно, чтобы найти позицию каретки (положение курсора) 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.

может у кого-нибудь есть какая-нибудь работа для меня.

в приведенном ниже примере моя позиция курсора находится между 't' и 'w' в ‹p›two‹/p› <div contenteditable="true"><p>one<br><b>t|wo</b></p></div> я полагаю, что в приведенном выше примере мне нужно число 14, так как мне нужно выполнить некоторую операцию в в этот момент я использую этот contenteditable div, поскольку RichTextbox с моим собственным стилем применяется к нему


javascript internet-explorer contenteditable cursor-position caret
person BrainCoder    schedule 31.05.2012    source источник
comment
Креативная позиция по отношению к чему? Код выглядит так, как будто он пытается получить позицию в строковом представлении HTML содержимого самого внутреннего узла, содержащего курсор. Обычно это бесполезное число, поэтому не могли бы вы сказать, что вы собираетесь делать с этой позицией каретки?   -  person Tim Down    schedule 31.05.2012
comment
Позиция каретки относительно начала моего contenteditable div до моего текущего элемента html внутри этого примера contenteditable div <div contenteditable="true"> <br/> <p>some text</p> <br/> <font>some text</font> <p>current cusrsor position here</p> <br/> <p>some text</p> </div>   -  person BrainCoder    schedule 31.05.2012
comment
Я все еще не очень понимаю, извините. Если символ вставки обозначается вертикальной чертой в следующем HTML-коде, какой номер вам нужен и что вы собираетесь с ним делать? <div contenteditable="true"><p>one<br><b>t|wo</b></p></div>   -  person Tim Down    schedule 31.05.2012
comment
<div contenteditable="true"><p>one<br><b>t|wo</b></p></div> я полагаю, что в приведенном выше примере мне нужен номер 14, так как мне нужно выполнить некоторую операцию в этот момент, я использую этот contenteditable div, поскольку RichTextbox с моим собственным стилем применяется к нему   -  person BrainCoder    schedule 31.05.2012
comment
@TimDown Если вы хотите вставить текст в определенную позицию, сохраняя внутренний HTML-код div, то это число действительно полезно.   -  person Rafael    schedule 28.05.2014

Ответы (1)


arrow_upward
4
arrow_downward

Привет, я нашел ответ для 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 или другой элемент управления

Я надеюсь, это поможет

person BrainCoder    schedule 06.06.2012