Ich finde unzählige gute Crossbrowser-Antworten zum Einstellen der Cursor- oder Caret-Indexposition in einem contentEditable
Element, 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 contentEditable
Elements erkennen.
EDIT: Ich suche den INDEX innerhalb des div-Inhalts (Text), nicht die Cursorkoordinaten.
<div id="contentBox" contentEditable="true"></div>
$('#contentbox').keyup(function() {
// ... ?
});
<a>
Element innerhalb des befindet<div>
, welchen Offset möchten Sie dann? Der Versatz innerhalb des Textes innerhalb des<a>
?Antworten:
Der folgende Code setzt voraus:
<div>
und keine anderen Knotenwhite-space
Eigenschaft 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:
quelle
<a>
Element innerhalb des befindet<div>
, welchen Versatz möchten Sie dann? Der Versatz innerhalb des Textes innerhalb des<a>
?keyup
ist wahrscheinlich das falsche Ereignis dafür, aber es wurde in der ursprünglichen Frage verwendet.getCaretPosition()
selbst ist in seinen eigenen Grenzen in Ordnung.<br>
oder<div>
-Element erzeugt, das gegen die erste in der Antwort erwähnte Annahme verstößt. Wenn Sie eine etwas allgemeinere Lösung benötigen, können Sie stackoverflow.com/a/4812022/96100Ein paar Falten, die ich in anderen Antworten nicht sehe:
Hier ist eine Möglichkeit, Start- und Endpositionen als Offsets zum textContent-Wert des Elements abzurufen:
quelle
quelle
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
quelle
contenteditable
li
wenn ich auf eine Schaltfläche klickte, umli
den Inhalt umzubenennen .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:
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
paragraphboundary
diedocumentboundary
Granularität für Ihren Fall oder eine andere . Weitere Informationen finden Sie in der API . Prost! :) :)quelle
<div contenteditable> some text here <i>italic text here</i> some other text here <b>bold text here</b> end of text </div>
Cursor vor demi
Tag oder einem untergeordneten HTML-Element platzierediv
, die Cursorposition bei 0 beginne. Gibt es eine Möglichkeit, dieser Neustartzählung zu entgehen?quelle
Dieser funktioniert für mich:
Die aufrufende Leitung hängt vom Ereignistyp ab. Verwenden Sie für Schlüsselereignisse Folgendes:
Verwenden Sie für Mausereignisse Folgendes:
In diesen beiden Fällen kümmere ich mich um Bruchlinien, indem ich den Zielindex hinzufüge
quelle
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).
quelle
Range
von den meisten Browsern zurückgegebeneTextRange
Objekt und das vom IE zurückgegebene Objekt sind sehr unterschiedliche Dinge, daher bin ich mir nicht sicher, ob diese Antwort viel löst.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.
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.
quelle
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 erforderlich
Element.closest('div[contenteditable]')
https://codepen.io/alockwood05/pen/vMpdmZ
quelle