Obter a posição do índice circunflexo contentEditable

Estou encontrando toneladas de boas respostas de crossbrowser sobre como AJUSTAR o cursor ou a posição do índice circunflexo em um contentEditableelemento, mas nenhuma sobre como GET ou encontrar seu índice ...

O que eu quero fazer é saber o índice do circunflexo dentro desta div, em keyup.

Portanto, quando o usuário está digitando um texto, posso saber a qualquer momento o índice do cursor dentro do contentEditableelemento.

EDIT: Estou procurando o INDEX dentro do conteúdo div (texto), não as coordenadas do cursor.

<div id="contentBox" contentEditable="true"></div>

$('#contentbox').keyup(function() { 
    // ... ? 
});

O código a seguir pressupõe:

• Sempre há um único nó de texto dentro do editável <div>e nenhum outro nó
• O div editável não tem a white-spacepropriedade CSS definida parapre

Se você precisar de uma abordagem mais geral que funcionará com o conteúdo com elementos aninhados, tente esta resposta:

https://stackoverflow.com/a/4812022/96100

Código:

function getCaretPosition(editableDiv) {
  var caretPos = 0,
    sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      if (range.commonAncestorContainer.parentNode == editableDiv) {
        caretPos = range.endOffset;
      }
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    if (range.parentElement() == editableDiv) {
      var tempEl = document.createElement("span");
      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
      var tempRange = range.duplicate();
      tempRange.moveToElementText(tempEl);
      tempRange.setEndPoint("EndToEnd", range);
      caretPos = tempRange.text.length;
    }
  }
  return caretPos;
}

#caretposition {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contentbox" contenteditable="true">Click me and move cursor with keys or mouse</div>
<div id="caretposition">0</div>
<script>
  var update = function() {
    $('#caretposition').html(getCaretPosition(this));
  };
  $('#contentbox').on("mousedown mouseup keydown keyup", update);
</script>

Algumas rugas que não vejo sendo abordadas em outras respostas:

1. o elemento pode conter vários níveis de nós filhos (por exemplo, nós filhos que têm nós filhos que têm nós filhos ...)
2. uma seleção pode consistir em diferentes posições inicial e final (por exemplo, vários caracteres são selecionados)
3. o nó que contém um início / fim de cursor não pode ser o elemento ou seus filhos diretos

Esta é uma maneira de obter as posições inicial e final como deslocamentos para o valor textContent do elemento:

// node_walk: walk the element tree, stop when func(node) returns false
function node_walk(node, func) {
  var result = func(node);
  for(node = node.firstChild; result !== false && node; node = node.nextSibling)
    result = node_walk(node, func);
  return result;
};

// getCaretPosition: return [start, end] as offsets to elem.textContent that
//   correspond to the selected portion of text
//   (if start == end, caret is at given position and no text is selected)
function getCaretPosition(elem) {
  var sel = window.getSelection();
  var cum_length = [0, 0];

  if(sel.anchorNode == elem)
    cum_length = [sel.anchorOffset, sel.extentOffset];
  else {
    var nodes_to_find = [sel.anchorNode, sel.extentNode];
    if(!elem.contains(sel.anchorNode) || !elem.contains(sel.extentNode))
      return undefined;
    else {
      var found = [0,0];
      var i;
      node_walk(elem, function(node) {
        for(i = 0; i < 2; i++) {
          if(node == nodes_to_find[i]) {
            found[i] = true;
            if(found[i == 0 ? 1 : 0])
              return false; // all done
          }
        }

        if(node.textContent && !node.firstChild) {
          for(i = 0; i < 2; i++) {
            if(!found[i])
              cum_length[i] += node.textContent.length;
          }
        }
      });
      cum_length[0] += sel.anchorOffset;
      cum_length[1] += sel.extentOffset;
    }
  }
  if(cum_length[0] <= cum_length[1])
    return cum_length;
  return [cum_length[1], cum_length[0]];
}

Experimente isto:

Caret.js Obtenha a posição do cursor e o deslocamento do campo de texto

https://github.com/ichord/Caret.js

demonstração: http://ichord.github.com/Caret.js

Meio atrasado para a festa, mas no caso de mais alguém estar com dificuldades. Nenhuma das pesquisas do Google que encontrei nos últimos dois dias resultou em algo que funcionasse, mas eu encontrei uma solução concisa e elegante que sempre funcionará, não importa quantas tags aninhadas você tenha:

function cursor_position() {
    var sel = document.getSelection();
    sel.modify("extend", "backward", "paragraphboundary");
    var pos = sel.toString().length;
    if(sel.anchorNode != undefined) sel.collapseToEnd();

    return pos;
}

// Demo:
var elm = document.querySelector('[contenteditable]');
elm.addEventListener('click', printCaretPosition)
elm.addEventListener('keydown', printCaretPosition)

function printCaretPosition(){
  console.log( cursor_position(), 'length:', this.textContent.trim().length )
}

<div contenteditable>some text here <i>italic text here</i> some other text here <b>bold text here</b> end of text</div>

Ele seleciona todo o caminho de volta ao início do parágrafo e então conta o comprimento da string para obter a posição atual e, em seguida, desfaz a seleção para retornar o cursor à posição atual. Se você quiser fazer isso para um documento inteiro (mais de um parágrafo), mude paragraphboundarypara documentboundaryou qualquer granularidade para o seu caso. Confira a API para mais detalhes . Felicidades! :)

function getCaretPosition() {
    var x = 0;
    var y = 0;
    var sel = window.getSelection();
    if(sel.rangeCount) {
        var range = sel.getRangeAt(0).cloneRange();
        if(range.getClientRects()) {
        range.collapse(true);
        var rect = range.getClientRects()[0];
        if(rect) {
            y = rect.top;
            x = rect.left;
        }
        }
    }
    return {
        x: x,
        y: y
    };
}

window.getSelection - vs - document.selection

Este funciona para mim:

function getCaretCharOffset(element) {
  var caretOffset = 0;

  if (window.getSelection) {
    var range = window.getSelection().getRangeAt(0);
    var preCaretRange = range.cloneRange();
    preCaretRange.selectNodeContents(element);
    preCaretRange.setEnd(range.endContainer, range.endOffset);
    caretOffset = preCaretRange.toString().length;
  } 

  else if (document.selection && document.selection.type != "Control") {
    var textRange = document.selection.createRange();
    var preCaretTextRange = document.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    caretOffset = preCaretTextRange.text.length;
  }

  return caretOffset;
}


// Demo:
var elm = document.querySelector('[contenteditable]');
elm.addEventListener('click', printCaretPosition)
elm.addEventListener('keydown', printCaretPosition)

function printCaretPosition(){
  console.log( getCaretCharOffset(elm), 'length:', this.textContent.trim().length )
}

<div contenteditable>some text here <i>italic text here</i> some other text here <b>bold text here</b> end of text</div>

A linha de chamada depende do tipo de evento, para evento-chave use isto:

getCaretCharOffsetInDiv(e.target) + ($(window.getSelection().getRangeAt(0).startContainer.parentNode).index());

para eventos de mouse, use isto:

getCaretCharOffsetInDiv(e.target.parentElement) + ($(e.target).index())

nesses dois casos, cuido das linhas de quebra adicionando o índice de destino

//global savedrange variable to store text range in
var savedrange = null;

function getSelection()
{
    var savedRange;
    if(window.getSelection && window.getSelection().rangeCount > 0) //FF,Chrome,Opera,Safari,IE9+
    {
        savedRange = window.getSelection().getRangeAt(0).cloneRange();
    }
    else if(document.selection)//IE 8 and lower
    { 
        savedRange = document.selection.createRange();
    }
    return savedRange;
}

$('#contentbox').keyup(function() { 
    var currentRange = getSelection();
    if(window.getSelection)
    {
        //do stuff with standards based object
    }
    else if(document.selection)
    { 
        //do stuff with microsoft object (ie8 and lower)
    }
});

Nota: o próprio objeto de intervalo pode ser armazenado em uma variável e pode ser selecionado novamente a qualquer momento, a menos que o conteúdo do div editável pelo conteúdo seja alterado.

Referência para IE 8 e inferior: http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

Referência para navegadores padrão (todos os outros): https://developer.mozilla.org/en/DOM/range (são os documentos do mozilla, mas o código funciona em chrome, safari, opera e ie9 também)

Como isso me levou uma eternidade para descobrir como usar a nova API window.getSelection que irei compartilhar para a posteridade. Observe que o MDN sugere que haja um suporte mais amplo para window.getSelection; no entanto, sua milhagem pode variar.

const getSelectionCaretAndLine = () => {
    // our editable div
    const editable = document.getElementById('editable');

    // collapse selection to end
    window.getSelection().collapseToEnd();

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

    // get anchor node if startContainer parent is editable
    let selectedNode = editable === range.startContainer.parentNode
      ? sel.anchorNode 
      : range.startContainer.parentNode;

    if (!selectedNode) {
        return {
            caret: -1,
            line: -1,
        };
    }

    // select to top of editable
    range.setStart(editable.firstChild, 0);

    // do not use 'this' sel anymore since the selection has changed
    const content = window.getSelection().toString();
    const text = JSON.stringify(content);
    const lines = (text.match(/\\n/g) || []).length + 1;

    // clear selection
    window.getSelection().collapseToEnd();

    // minus 2 because of strange text formatting
    return {
        caret: text.length - 2, 
        line: lines,
    }
} 

Aqui está um jsfiddle que dispara no keyup. Observe, entretanto, que os pressionamentos rápidos das teclas direcionais, bem como a exclusão rápida, parecem ser eventos ignorados.

Uma maneira direta, que itera por todos os filhos do div contenteditable até atingir o endContainer. Em seguida, adiciono o deslocamento final do contêiner e temos o índice de caracteres. Deve funcionar com qualquer número de assentamentos. usa recursão.

Nota: requer um poli preenchimento para, por exemplo, apoiarElement.closest('div[contenteditable]')

https://codepen.io/alockwood05/pen/vMpdmZ

function caretPositionIndex() {
    const range = window.getSelection().getRangeAt(0);
    const { endContainer, endOffset } = range;

    // get contenteditableDiv from our endContainer node
    let contenteditableDiv;
    const contenteditableSelector = "div[contenteditable]";
    switch (endContainer.nodeType) {
      case Node.TEXT_NODE:
        contenteditableDiv = endContainer.parentElement.closest(contenteditableSelector);
        break;
      case Node.ELEMENT_NODE:
        contenteditableDiv = endContainer.closest(contenteditableSelector);
        break;
    }
    if (!contenteditableDiv) return '';


    const countBeforeEnd = countUntilEndContainer(contenteditableDiv, endContainer);
    if (countBeforeEnd.error ) return null;
    return countBeforeEnd.count + endOffset;

    function countUntilEndContainer(parent, endNode, countingState = {count: 0}) {
      for (let node of parent.childNodes) {
        if (countingState.done) break;
        if (node === endNode) {
          countingState.done = true;
          return countingState;
        }
        if (node.nodeType === Node.TEXT_NODE) {
          countingState.count += node.length;
        } else if (node.nodeType === Node.ELEMENT_NODE) {
          countUntilEndContainer(node, endNode, countingState);
        } else {
          countingState.error = true;
        }
      }
      return countingState;
    }
  }