4

Я работаю с contenteditable DIV, который будет иметь возможность иметь встроенный HTML элементы, такие как теги «< р > < шрифт > < уш > » в текстовом потоке.Как получить каре позицию в contenteditable DIV с HTML дочерних элементами в Internet Explorer

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

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

У меня может быть любая работа для меня.

В приведенном ниже примере моего позиция курсора находится в пределах от «т» и «W» в < р > два </р > <div contenteditable="true"><p>one<br><b>t|wo</b></p></div> я полагаю, нужно число 14 в приведенном выше примере, как мне нужно выполнить некоторую операцию в что точка я использую этот contenteditable DIV как RichTextBox с моим пользовательский стиль применить к нему

+0

Craet позицию по отношению к чему? Код выглядит так, как будто он пытается получить позицию в строчном представлении HTML содержимого самого внутреннего узла, содержащего каретку. Это обычно не полезное число, так что вы могли бы сказать, что вы намерены делать с этой кареткой? –

+0

Позиция Caret относительно начала моего contenteditable div для моего текущего элемента html внутри этого contenteditable div пример


some text


some text

current cusrsor position here


some text

' – BrainCoder

+0

Я все еще не очень понимаю, извините. Если каретка обозначена трубой в следующем HTML, какое число вы хотите, и что вы собираетесь с ней делать? ''

one
t|wo

ответ

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() является undifined для IE8 или ниже, и прекрасно работает с IE9

поэтому можно использовать document.selectionselection объект и range объект в к получить текущую каретка или положение курсора формы contenteditablediv или другой орган управления

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

Смежные вопросы