Obtener contenido Posición de índice de intercalación editable

Estoy encontrando toneladas de buenas respuestas de navegadores cruzados sobre cómo CONFIGURAR el cursor o la posición del índice de intercalación en un contentEditableelemento, pero ninguna sobre cómo OBTENER o encontrar su índice ...

Lo que quiero hacer es conocer el índice del signo de intercalación dentro de este div, en keyup.

Entonces, cuando el usuario está escribiendo texto, puedo saber en cualquier momento el índice de su cursor dentro del contentEditableelemento.

EDITAR: Estoy buscando el ÍNDICE dentro del contenido div (texto), no las coordenadas del cursor.

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

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

El siguiente código asume:

• Siempre hay un solo nodo de texto dentro del editable <div>y ningún otro nodo
• El div editable no tiene la white-spacepropiedad CSS establecida enpre

Si necesita un enfoque más general que funcione con contenido con elementos anidados, pruebe esta respuesta:

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>

Algunas arrugas que no veo que se aborden en otras respuestas:

1. el elemento puede contener múltiples niveles de nodos secundarios (por ejemplo, nodos secundarios que tienen nodos secundarios que tienen nodos secundarios ...)
2. una selección puede constar de diferentes posiciones inicial y final (por ejemplo, se seleccionan varios caracteres)
3. el nodo que contiene un inicio / final de Caret puede no ser ni el elemento ni sus hijos directos

Esta es una forma de obtener las posiciones inicial y final como compensaciones del valor textContent del 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]];
}

Prueba esto:

Caret.js Obtener la posición de intercalación y el desplazamiento del campo de texto

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

demostración: http://ichord.github.com/Caret.js

Un poco tarde para la fiesta, pero en caso de que alguien más tenga problemas. Ninguna de las búsquedas de Google que he encontrado durante los últimos dos días ha dado con algo que funcione, pero se me ocurrió una solución concisa y elegante que siempre funcionará sin importar cuántas etiquetas anidadas tenga:

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>

Selecciona todo el camino hasta el principio del párrafo y luego cuenta la longitud de la cadena para obtener la posición actual y luego deshace la selección para devolver el cursor a la posición actual. Si desea hacer esto para un documento completo (más de un párrafo), cambie paragraphboundarya documentboundaryo cualquier granularidad para su caso. Consulte la API para obtener más detalles . ¡Salud! :)

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

Esta funciona para mí:

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>

La línea de llamada depende del tipo de evento, para evento clave use esto:

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

para el evento del mouse use esto:

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

en estos dos casos me ocupo de las líneas de ruptura agregando el í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: el objeto de rango en sí mismo se puede almacenar en una variable y se puede volver a seleccionar en cualquier momento a menos que cambie el contenido del div contenteditable.

Referencia para IE 8 y versiones anteriores: http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

Referencia para navegadores estándares (todos los demás): https://developer.mozilla.org/en/DOM/range (son los documentos de mozilla, pero el código funciona en Chrome, Safari, Opera e ie9 también)

Como esto me tomó una eternidad averiguar el uso de la nueva API window.getSelection que voy a compartir para la posteridad. Tenga en cuenta que MDN sugiere que hay un soporte más amplio para window.getSelection, sin embargo, su millaje puede 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,
    }
} 

Aquí hay un jsfiddle que se dispara al activar el teclado. Sin embargo, tenga en cuenta que las pulsaciones rápidas de las teclas de dirección, así como la eliminación rápida, parecen ser eventos de omisión.

Una forma sencilla, que itera a través de todos los niños del div contenteditable hasta que llega al endContainer. Luego agrego el desplazamiento del contenedor final y tenemos el índice de caracteres. Debería funcionar con cualquier número de nidos. utiliza la recursividad.

Nota: requiere un relleno de polietileno para que, por ejemplo, soporteElement.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;
    }
  }