Получите координаты каретки на contenteditable div через javascript.

Я много искал, но я не мог найти способ получить (X, Y) координаты для каретки на редактируемом содержимом div, там много контента в Интернете об этом, но проблема отсутствует страниц, которые я нашел, получают координаты в соответствии с вершиной div, поэтому мой вопрос проще:

Как я могу получить координаты (X, Y) каретки на contenteditable div, но координату Y нужно вычислять в соответствии с вершиной div, а не с верхней части видимой части страница?

Примечание 1: Мне нужна координата Y.

Примечание 2: Я могу использовать только чистый javascript, без JQUERY.

Мой способ:

Я не нашел прямого способа сделать это, так как обходной путь я думал о том, чтобы получить координату Y в соответствии с видимой частью страницы и скрытой частью Div и суммировать результаты (я в настоящее время работая над этим, но мне не повезло!).

Ответы

Ответ 1

  • получить выбор и диапазон

     var sel = window.getSelection();
 var range = sel.getRangeAt(0);

  • вставить свернутый div

     var div = document.createElement(...)
 range.insertNode(div)

  • получить координаты div

  • удалить div

Ответ 2

чтобы найти координату (X, Y) и используя чистый javascript, эта функция, которую я нашел, может сделать трюк: в этом Source вы найдете все объяснения их процесса (код ниже берется из одного источника):

function getPosition(el) {
  var xPos = 0;
  var yPos = 0;

  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;

      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }

    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}

Ответ 3

попробуйте это:

var selection = window.getSelection(),
    range = selection.getRangeAt(0),
    rect = range.getClientRects()[0];

в прямоangularьной переменной вы должны найти положение:

rect.left → для координаты х rect.top → для координаты y

есть также rect.width и rect.height. Если у пользователя выбран какой-либо текст, rect.width будет> 0.

Ответ 4

попробуйте это http://plnkr.co/edit/T2S7sKByTIesEVC6R8jQ?p=preview

document.addEventListener("DOMContentLoaded", function(event) { 
  var pointer = document.querySelector('#marker')
  function checkCaret() {
    if(document.getSelection()) {
      if(document.getSelection().baseNode) {
        var position = document.getSelection().baseNode.parentNode.getBoundingClientRect()
        pointer.style.top = position.top + 'px'
      }
    }
  }
  setInterval(checkCaret, 500)
});