Найти элемент каретки внутри элемента

У меня есть промежуток внутри contenteditable div, и мне нужно выяснить, находится ли курсор в последней позиции в теге span. Я посмотрел в решениях «Выбор и диапазон», но не смог найти прямой способ добиться этого.Найти элемент каретки внутри элемента

<html> 
    <script> 
     var selection = window.getSelection(); 
     var range = selection.getRangeAt(0); 
     //this is what I am trying to achive 
     var selection_target = range.selectNodeContents(document.getElementById('target')); 
     var length = selection_target.toString().length; 

    </script> 
    <body> 
      <div id='target' contenteditable='true'> 
      <span>some text(figure cursor position here)</span> 
      </div> 
     </body> 
</html>

источник

2012-09-23 Ohad Sadan

Для случая в вопросе, где пролет имеет только одного ребенка, который является текстовым узлом, вы можете проверить, является ли каретка находится в конце этого следующим образом:

Демо: http://jsfiddle.net/Wm5Hz/

Код:

var span = document.getElementById("target").getElementsByTagName("span")[0]; 
var spanTextNode = span.lastChild; 
var sel = window.getSelection(); 
var isCaretAtEndOfSpan = (sel.isCollapsed 
    && sel.focusNode == spanTextNode 
    && sel.focusOffset == spanTextNode.data.length);

Вещи немного более сложны в общем случае: та же визуальная позиция может быть представлена различными способами (например, после того, как последний символ в текстовом узле, после самого текстового узла, после окончания диапазона), плюс, если span может содержать элементы, тогда вам нужно будет найти последний текстовый узел в пределах диапазона и сравнить выделение с ним. Кроме того, ничто из этого не работает в IE < 9, который имеет совершенно другой API.

источник

2012-09-25 09:10:32

Найти элемент каретки внутри элемента

ответ

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