Ottieni contenuto Posizione dell'indice del cursore modificabile

Sto trovando tonnellate di buone risposte crossbrowser su come IMPOSTARE il cursore o la posizione dell'indice del cursore in un contentEditableelemento, ma nessuna su come OTTENERE o trovare il suo indice ...

Quello che voglio fare è conoscere l'indice del cursore all'interno di questo div, su keyup.

Quindi, quando l'utente sta digitando del testo, posso in qualsiasi momento conoscere l'indice del suo cursore all'interno contentEditabledell'elemento.

EDIT: Sto cercando l' INDICE all'interno del contenuto div (testo), non le coordinate del cursore.

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

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

Il codice seguente presuppone:

• C'è sempre un singolo nodo di testo all'interno del modificabile <div>e nessun altro nodo
• Il div modificabile non ha la white-spaceproprietà CSS impostata supre

Se hai bisogno di un approccio più generale che funzioni contenuto con elementi nidificati, prova questa risposta:

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

Codice:

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>

Alcune rughe che non vedo essere affrontate in altre risposte:

1. l'elemento può contenere più livelli di nodi figlio (ad es. nodi figlio che hanno nodi figlio che hanno nodi figlio ...)
2. una selezione può essere composta da diverse posizioni di inizio e fine (ad es. vengono selezionati più caratteri)
3. il nodo contenente un segno di saluto iniziale / finale potrebbe non essere l'elemento o i suoi figli diretti

Ecco un modo per ottenere le posizioni di inizio e fine come offset rispetto al valore textContent dell'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]];
}

Prova questo:

Caret.js Ottieni la posizione del cursore e l'offset dal campo di testo

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

demo: http://ichord.github.com/Caret.js

Un po 'tardi per la festa, ma nel caso qualcun altro stia lottando. Nessuna delle ricerche su Google che ho trovato negli ultimi due giorni ha prodotto qualcosa che funziona, ma ho trovato una soluzione concisa ed elegante che funzionerà sempre indipendentemente dal numero di tag nidificati che hai:

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>

Seleziona fino all'inizio del paragrafo e quindi conta la lunghezza della stringa per ottenere la posizione corrente, quindi annulla la selezione per riportare il cursore nella posizione corrente. Se desideri eseguire questa operazione per un intero documento (più di un paragrafo), cambia paragraphboundaryin documentboundaryo qualsiasi granularità per il tuo caso. Controlla l'API per maggiori dettagli . Saluti! :)

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

Questo funziona per me:

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 linea chiamante dipende dal tipo di evento, per l'evento chiave utilizzare questo:

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

per l'evento del mouse usa questo:

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

in questi due casi mi occupo delle linee di interruzione aggiungendo l'indice di destinazione

//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: l'oggetto intervallo può essere memorizzato in una variabile e può essere riselezionato in qualsiasi momento a meno che il contenuto del div contenteditable non cambi.

Riferimento per IE 8 e versioni precedenti: http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

Riferimento per i browser standard (tutti gli altri): https://developer.mozilla.org/en/DOM/range (è la documentazione di mozilla, ma il codice funziona anche in chrome, safari, opera e ie9)

Dato che ho impiegato un'eternità a capire usando la nuova API window.getSelection, condividerò per i posteri. Nota che MDN suggerisce che esiste un supporto più ampio per window.getSelection, tuttavia, il tuo chilometraggio potrebbe variare.

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,
    }
} 

Ecco un jsfiddle che si attiva su keyup. Si noti, tuttavia, che le pressioni rapide dei tasti direzionali e l'eliminazione rapida sembrano essere eventi di salto.

Un modo diretto, che itera attraverso tutti i bambini del div contenteditable fino a raggiungere endContainer. Quindi aggiungo l'offset del contenitore finale e abbiamo l'indice dei caratteri. Dovrebbe funzionare con qualsiasi numero di annidamenti. usa la ricorsione.

Nota: richiede un riempimento poli per ie per supportareElement.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;
    }
  }