Holen Sie sich contentEditable Caret Index Position

Ich finde unzählige gute Crossbrowser-Antworten zum Einstellen der Cursor- oder Caret-Indexposition in einem contentEditableElement, aber keine zum Abrufen oder Finden des Index ...

Was ich tun möchte, ist den Index des Carets innerhalb dieser Division zu kennen keyup.

Wenn der Benutzer Text eingibt, kann ich jederzeit den Index des Cursors innerhalb des contentEditableElements erkennen.

EDIT: Ich suche den INDEX innerhalb des div-Inhalts (Text), nicht die Cursorkoordinaten.

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

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

Der folgende Code setzt voraus:

• Es gibt immer einen einzelnen Textknoten innerhalb der bearbeitbaren <div>und keine anderen Knoten
• Für das bearbeitbare div ist die CSS- white-spaceEigenschaft nicht festgelegtpre

Wenn Sie einen allgemeineren Ansatz benötigen, der Inhalte mit verschachtelten Elementen bearbeitet, versuchen Sie diese Antwort:

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

Code:

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>

Ein paar Falten, die ich in anderen Antworten nicht sehe:

1. Das Element kann mehrere Ebenen von untergeordneten Knoten enthalten (z. B. untergeordnete Knoten mit untergeordneten Knoten mit untergeordneten Knoten ...).
2. Eine Auswahl kann aus verschiedenen Start- und Endpositionen bestehen (z. B. werden mehrere Zeichen ausgewählt).
3. Der Knoten, der einen Caret-Start / Ende enthält, ist möglicherweise weder das Element noch seine direkten untergeordneten Elemente

Hier ist eine Möglichkeit, Start- und Endpositionen als Offsets zum textContent-Wert des Elements abzurufen:

// 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]];
}

Versuche dies:

Caret.js Holen Sie sich die Caret-Position und den Versatz aus dem Textfeld

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

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

Ein bisschen zu spät zur Party, aber für den Fall, dass jemand anderes Probleme hat. Keine der Google-Suchanfragen, die ich in den letzten zwei Tagen gefunden habe, hat etwas ergeben, das funktioniert, aber ich habe eine präzise und elegante Lösung gefunden, die immer funktioniert, unabhängig davon, wie viele verschachtelte Tags Sie haben:

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>

Es wählt bis zum Anfang des Absatzes aus und zählt dann die Länge der Zeichenfolge, um die aktuelle Position zu erhalten, und macht dann die Auswahl rückgängig, um den Cursor an die aktuelle Position zurückzusetzen. Wenn Sie dies für ein gesamtes Dokument (mehr als einen Absatz) tun möchten, ändern Sie paragraphboundarydie documentboundaryGranularität für Ihren Fall oder eine andere . Weitere Informationen finden Sie in der API . Prost! :) :)

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

Dieser funktioniert für mich:

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>

Die aufrufende Leitung hängt vom Ereignistyp ab. Verwenden Sie für Schlüsselereignisse Folgendes:

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

Verwenden Sie für Mausereignisse Folgendes:

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

In diesen beiden Fällen kümmere ich mich um Bruchlinien, indem ich den Zielindex hinzufüge

//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)
    }
});

Hinweis: Das Bereichsobjekt selbst kann in einer Variablen gespeichert und jederzeit erneut ausgewählt werden, es sei denn, der Inhalt des inhaltsbearbeitbaren Div ändert sich.

Referenz für IE 8 und niedriger: http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

Referenz für Standardbrowser (alle anderen): https://developer.mozilla.org/en/DOM/range (es sind die Mozilla-Dokumente, aber Code funktioniert auch in Chrome, Safari, Opera und IE9).

Da ich ewig gebraucht habe , um mithilfe der neuen window.getSelection- API herauszufinden, werde ich sie für die Nachwelt freigeben . Beachten Sie, dass MDN eine umfassendere Unterstützung für window.getSelection vorschlägt. Ihr Kilometerstand kann jedoch variieren.

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

Hier ist eine jsfiddle , die beim Keyup ausgelöst wird. Beachten Sie jedoch, dass schnelles Drücken von Richtungstasten sowie schnelles Löschen Ereignisse zu überspringen scheinen.

Ein direkter Weg, der alle Kinder des inhaltsbearbeitbaren Div durchläuft, bis er den endContainer erreicht. Dann füge ich den Endcontainer-Offset hinzu und wir haben den Zeichenindex. Sollte mit einer beliebigen Anzahl von Verschachtelungen funktionieren. verwendet Rekursion.

Hinweis: Für die Unterstützung ist eine Polyfüllung erforderlichElement.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;
    }
  }