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

Работя с 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, но не мисля, че ще работи за мен, за да намеря позиция на каретката (позиция на курсора) на contenteditable div.

може ли някой да има някаква работа за мен.

в примера по-долу моята позиция на курсора е между 't' и 'w' в ‹p›two‹/p› <div contenteditable="true"><p>one<br><b>t|wo</b></p></div> предполагам, че имам нужда от номер 14 в примера по-горе, тъй като трябва да извърша някаква операция в в тази точка използвам този 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 в горния пример, тъй като трябва да извърша някаква операция в този момент, използвам този 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