Определить расположение текстового курсора в div editable?

Question

[Михаил Пахмутов]

Пытаюсь определить где находится курсов в div editable, прочесал гугл сверху до низу, нашёл рабочие решения, но в тексте
ab
с курсором между буквами "а" и "б" мне сообщается, что курсор на первом символе, т.е. html теги не учитываются, а мне нужно, чтобы и они учитывались.

Очень надеюсь на вашу помощь.

Answer 1

[egorp]

Существует плагин jquery.caret (http://plugins.jquery.com/caret/) который позволяет простым вызовом
var position = $("#myeditable").caret();
получить положение курсора внутри editable div. Плагин маленький, ~60 строк, и в нем несложно разобраться.

Однако, он определяет положение относительно текста.
Если вам нужно проверить, например, что курсор попал в заданный span, то топорный способ — обходить все текстовые узлы до тех пор пока их суммарная длина не станет больше чем позиция курсора.

Сделать это можно с помощью createTreeWalker

function getTextNodeByCaret(caret) {
  var len = 0;
  var walk = document.createTreeWalker($("#myeditable")[0], NodeFilter.SHOW_TEXT, null, false);
  var last;
  var node;
  while ((node = walk.nextNode())) {
    last = node;
    if ((len += node.textContent.length) >= caret) {
      return node;
    }
  }
  return last;
}