EditContext.selectionEnd — Eigenschaft · JavaScript-Referenz

Signatur

get EditContext.prototype.selectionEnd

Beschreibung

EditContext.selectionEnd liefert eine Zahl: den Offset im Text des EditContext (also in editContext.text), an dem die aktuelle Auswahl endet. Zusammen mit selectionStart beschreibt diese Eigenschaft den markierten Bereich. Sind beide Werte gleich, ist die Auswahl zusammengefallen. Dann gibt es keine Markierung, sondern nur eine Einfügemarke (den Cursor) an dieser Stelle.

Die EditContext API ist für eigene Editoren gedacht, die ihren Text selbst darstellen, zum Beispiel in einem <canvas> oder in einem selbst verwalteten DOM. Der Browser leitet Tastatur- und IME-Eingaben (Input Method Editor) an den EditContext weiter. Die Anwendung ist dafür zuständig, Text und Auswahl zu zeichnen. Mit selectionEnd liest sie aus, wo die Auswahl laut Eingabesystem gerade liegt, etwa um den Cursor zu zeichnen oder um bei Tastenkürzeln den markierten Text zu ermitteln.

Die Eigenschaft ist schreibgeschützt. Ändern lässt sich die Auswahl nur über EditContext.updateSelection(start, end) oder beim Erzeugen über das Optionsobjekt von new EditContext({ selectionEnd }). Bei Texteingaben aktualisiert der Browser den Wert selbst. Den neuen Wert enthält außerdem das Ereignis textupdate in event.selectionEnd.

Rückgabewert

Typ

number

Beschreibung

Nicht negative ganze Zahl: der Offset (in UTF-16-Codeeinheiten) im Text des EditContext, an dem die aktuelle Auswahl endet. Standardwert ist 0.

Beispiele

Auswahl beim Erzeugen festlegen und auslesen

const editor = document.querySelector('#editor');

// Text mit den markierten Zeichen 6 bis 11 ("Welt")
const editContext = new EditContext({
  text: 'Hallo Welt!',
  selectionStart: 6,
  selectionEnd: 10
});
editor.editContext = editContext;

console.log(editContext.selectionStart, editContext.selectionEnd);
console.log(editContext.text.slice(editContext.selectionStart, editContext.selectionEnd));

6 10 Welt

Auswahl mit updateSelection() ändern

const editContext = new EditContext({ text: 'Beispieltext' });
document.querySelector('#editor').editContext = editContext;

console.log(editContext.selectionEnd); // Standardwert

// Cursor ans Textende setzen (zusammengefallene Auswahl)
const len = editContext.text.length;
editContext.updateSelection(len, len);
console.log(editContext.selectionStart === editContext.selectionEnd, editContext.selectionEnd);

// Direkte Zuweisung hat keine Wirkung (schreibgeschützt)
editContext.selectionEnd = 3;
console.log(editContext.selectionEnd);

0 true 12 12

Cursor im eigenen Editor nach Texteingabe zeichnen

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const editContext = new EditContext();
canvas.editContext = editContext;
canvas.focus();

const render = () => {
  const { text, selectionStart, selectionEnd } = editContext;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.font = '20px sans-serif';
  ctx.fillText(text, 10, 30);

  // Auswahl hervorheben bzw. Cursor zeichnen
  const x1 = 10 + ctx.measureText(text.slice(0, Math.min(selectionStart, selectionEnd))).width;
  const x2 = 10 + ctx.measureText(text.slice(0, Math.max(selectionStart, selectionEnd))).width;
  ctx.fillStyle = selectionStart === selectionEnd ? 'black' : 'rgba(0, 120, 255, 0.3)';
  ctx.fillRect(x1, 12, Math.max(x2 - x1, 1), 24);
  ctx.fillStyle = 'black';
};

editContext.addEventListener('textupdate', (event) => {
  console.log(`Auswahlende: ${event.selectionEnd} / Eigenschaft: ${editContext.selectionEnd}`);
  render();
});

Auswahlende: 1 / Eigenschaft: 1 (nach Eingabe des ersten Zeichens)

// Wichtig · Fallstricke

Browserunterstützung: Die EditContext API ist experimentell und nur in Chromium-Browsern ab Version 121 verfügbar. Vor der Nutzung sollte man die Unterstützung mit 'EditContext' in window prüfen und sonst auf contenteditable oder <textarea> ausweichen.
Die Richtung der Auswahl bleibt erhalten: selectionEnd kann kleiner als selectionStart sein, wenn rückwärts markiert wird (etwa mit Umschalt+Pfeil nach links). Wer den markierten Text braucht, sollte deshalb Math.min() und Math.max() verwenden.
Keine automatische Verbindung zum DOM: Klicks oder Markierungen, die die Anwendung selbst verarbeitet, aktualisieren selectionEnd nicht. Die Anwendung muss updateSelection() selbst aufrufen, sonst sieht der IME eine veraltete Position.
Offsets zählen UTF-16-Codeeinheiten: Emojis und andere Zeichen außerhalb der Basic Multilingual Plane (BMP) zählen doppelt. Beim Berechnen von Positionen sollte man den Text daher nicht mit Array-Methoden in Zeichen zerlegen.
Eine Zuweisung an die Eigenschaft wird im nicht strikten Modus stillschweigend ignoriert. Im strikten Modus löst sie einen TypeError aus.

Siehe auch

EditContext EditContext.selectionStart EditContext.updateSelection() EditContext.text HTMLInputElement.selectionEnd EditContext.characterBoundsRangeStart